synapse-react-client 2.1.23 → 3.0.0

package/dist/containers/QueryVisualizationWrapper.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QueryVisualizationWrapper = exports.QueryVisualizationContextConsumer = exports.useQueryVisualizationContext = exports.QueryVisualizationContextProvider = exports.QueryVisualizationContext = void 0;
+var tslib_1 = require("tslib");
+var react_1 = (0, tslib_1.__importStar)(require("react"));
+var QueryWrapper_1 = require("./QueryWrapper");
+/**
+ * This must be exported to use the context in class components.
+ */
+exports.QueryVisualizationContext = (0, react_1.createContext)(undefined);
+/**
+ * Provides fields and functions related to visualizing a Synapse table query. For actual query data, see QueryContextProvider.
+ */
+var QueryVisualizationContextProvider = function (_a) {
+    var children = _a.children, queryVisualizationContext = _a.queryVisualizationContext;
+    return (react_1.default.createElement(exports.QueryVisualizationContext.Provider, { value: queryVisualizationContext }, children));
+};
+exports.QueryVisualizationContextProvider = QueryVisualizationContextProvider;
+function useQueryVisualizationContext() {
+    var context = (0, react_1.useContext)(exports.QueryVisualizationContext);
+    if (context === undefined) {
+        throw new Error('useQueryVisualizationContext must be used within a QueryWrapper');
+    }
+    return context;
+}
+exports.useQueryVisualizationContext = useQueryVisualizationContext;
+exports.QueryVisualizationContextConsumer = exports.QueryVisualizationContext.Consumer;
+/**
+ * QueryVisualizationWrapper manages UI state for components that query tables in Synapse. That state can be accessed
+ * or updated using QueryVisualizationContext. A QueryVisualizationWrapper must be used within a QueryWrapper.
+ */
+function QueryVisualizationWrapper(props) {
+    var _a;
+    var _b = (0, QueryWrapper_1.useQueryContext)(), data = _b.data, getLastQueryRequest = _b.getLastQueryRequest, isFacetsAvailable = _b.isFacetsAvailable, isLoadingNewBundle = _b.isLoadingNewBundle;
+    var _c = (0, react_1.useState)({
+        showColumnFilter: true,
+        showFacetFilter: true,
+        showFacetVisualization: (_a = props.defaultShowFacetVisualization) !== null && _a !== void 0 ? _a : true,
+        showSearchBar: false,
+        showDownloadConfirmation: false,
+        showColumnSelectDropdown: false,
+        showSqlEditor: false,
+    }), topLevelControlsState = _c[0], setTopLevelControlsState = _c[1];
+    (0, react_1.useEffect)(function () {
+        if (!isFacetsAvailable) {
+            setTopLevelControlsState(function (state) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, state), { showFacetFilter: false, showFacetVisualization: false })); });
+        }
+    }, [isFacetsAvailable]);
+    (0, react_1.useEffect)(function () {
+        if (isLoadingNewBundle) {
+            setSelectedRowIndices([]);
+        }
+    }, [isLoadingNewBundle]);
+    var _d = (0, react_1.useState)([]), isColumnSelected = _d[0], setIsColumnSelected = _d[1];
+    var _e = (0, react_1.useState)([]), selectedRowIndices = _e[0], setSelectedRowIndices = _e[1];
+    var lastQueryRequest = getLastQueryRequest();
+    var selectColumns = data === null || data === void 0 ? void 0 : data.selectColumns;
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        // SWC-6030: If sql changes, reset what columns are visible
+        setIsColumnSelected((_b = selectColumns === null || selectColumns === void 0 ? void 0 : selectColumns.slice(0, (_a = props.visibleColumnCount) !== null && _a !== void 0 ? _a : Infinity).map(function (el) { return el.name; })) !== null && _b !== void 0 ? _b : []);
+    }, [selectColumns, lastQueryRequest.query.sql, props.visibleColumnCount]);
+    var context = {
+        topLevelControlsState: topLevelControlsState,
+        setTopLevelControlsState: setTopLevelControlsState,
+        columnsToShowInTable: isColumnSelected,
+        setColumnsToShowInTable: setIsColumnSelected,
+        selectedRowIndices: selectedRowIndices,
+        setSelectedRowIndices: setSelectedRowIndices,
+        facetAliases: props.facetAliases,
+        rgbIndex: props.rgbIndex,
+        unitDescription: props.unitDescription,
+    };
+    /**
+     * Render the children without any formatting
+     */
+    var children = props.children;
+    return (react_1.default.createElement(exports.QueryVisualizationContextProvider, { queryVisualizationContext: context }, children));
+}
+exports.QueryVisualizationWrapper = QueryVisualizationWrapper;
+//# sourceMappingURL=QueryVisualizationWrapper.js.map

package/dist/containers/QueryVisualizationWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryVisualizationWrapper.js","sourceRoot":"","sources":["../../src/lib/containers/QueryVisualizationWrapper.tsx"],"names":[],"mappings":"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"}

package/dist/containers/QueryWrapper.d.ts

@@ -1,34 +1,66 @@
 import * as React from 'react';
-import { AsynchronousJobStatus, QueryBundleRequest, QueryResultBundle, SelectColumn } from '../utils/synapseTypes/';
 import { SynapseClientError } from '../utils/SynapseClient';
+import { AsynchronousJobStatus, Entity, QueryBundleRequest, QueryResultBundle } from '../utils/synapseTypes';
+export declare const QUERY_FILTERS_EXPANDED_CSS: string;
+export declare const QUERY_FILTERS_COLLAPSED_CSS: string;
+export declare type QueryContextType = {
+    /** The entity being queried. Will be undefined while initially fetching */
+    entity: Entity | undefined;
+    /** The query results, which will be undefined while initially fetching a new bundle, but will not be unloaded when fetching new pages */
+    data: QueryResultBundle | undefined;
+    /** Returns a deep clone of the current query bundle request */
+    getLastQueryRequest: () => QueryBundleRequest;
+    /** Returns a deep clone of the initial query bundle request */
+    getInitQueryRequest: () => QueryBundleRequest;
+    /** Updates the current query with the passed request */
+    executeQueryRequest: (param: QueryBundleRequest) => void;
+    /** Returns true when loading a new page of query results */
+    isLoadingNewPage: boolean;
+    /** Returns true when loading a brand new query result bundle. Will not be true when just loading the next page of query results. */
+    isLoadingNewBundle: boolean;
+    /** The error returned by the query request, if one is encountered */
+    error: SynapseClientError | null;
+    /** The status of the asynchronous job. */
+    asyncJobStatus: AsynchronousJobStatus<unknown, unknown>;
+    /** Whether or not the query result bundle has a next page */
+    hasNextPage: boolean;
+    /** Invoke this method to fetch and append the next page of rows to the data  */
+    appendNextPageToResults: () => Promise<void>;
+    /** Invoke to fetch and update the data with the next page of query results */
+    goToNextPage: () => Promise<void>;
+    /** Whether or not the query result bundle has a previous page */
+    hasPreviousPage: boolean;
+    /** Invoke to fetch and update the data with the previous page of query results */
+    goToPreviousPage: () => Promise<void>;
+    /** Whether or not facets are available to be filtered upon based on the current data */
+    isFacetsAvailable: boolean;
+    /**
+     * A facet may be "locked" so that it is not modifiable by the user, for example when showing only data relevant to a particular facet value on a Details Page.
+     * The value of a locked facet will result in a client-side modification of the result bundle data.
+     */
+    lockedFacet?: LockedFacet;
+};
+/**
+ * This must be exported to use the context in class components.
+ */
+export declare const QueryContext: React.Context<QueryContextType | undefined>;
+export declare type QueryContextProviderProps = {
+    queryContext: QueryContextType;
+};
 /**
- * TODO: SWC-5612 - Replace token prop with SynapseContext.accessToken
- *
- * This wasn't done because Enzyme's shallow renderer is not currently
- * compatible with the `contextType` field in the React 16+ context API.
- *
- * This can be fixed by rewriting tests to not rely on the shallow renderer.
- *
- * See here: https://github.com/enzymejs/enzyme/issues/1553
+ * Provides data related to a Synapse table query, and functions for iterating through pages of the data.
  */
+export declare const QueryContextProvider: React.FC<QueryContextProviderProps>;
+export declare function useQueryContext(): QueryContextType;
+export declare const QueryContextConsumer: React.Consumer<QueryContextType | undefined>;
 export declare type QueryWrapperProps = {
-    visibleColumnCount?: number;
+    children: React.ReactNode | React.ReactNode[];
     initQueryRequest: QueryBundleRequest;
-    rgbIndex?: number;
-    token?: string;
-    facet?: string;
-    unitDescription?: string;
-    facetAliases?: Record<string, string>;
-    loadNow?: boolean;
-    showBarChart?: boolean;
     componentIndex?: number;
     shouldDeepLink?: boolean;
     onQueryChange?: (newQueryJson: string) => void;
     onQueryResultBundleChange?: (newQueryResultBundleJson: string) => void;
-    hiddenColumns?: string[];
     lockedFacet?: LockedFacet;
-    defaultShowFacetVisualization?: boolean;
-    children?: (queryWrapperChildProps: QueryWrapperChildProps) => React.ReactNode | React.ReactNode[];
 };
 export declare type TopLevelControlsState = {
     showFacetVisualization: boolean;
@@ -43,134 +75,12 @@ export declare type SearchQuery = {
     columnName: string;
     searchText: string;
 };
-export declare type QueryWrapperState = {
-    isAllFilterSelectedForFacet: Record<string, boolean>;
-    data: QueryResultBundle | undefined;
-    isLoadingNewData: boolean;
-    isLoading: boolean;
-    lastQueryRequest: QueryBundleRequest;
-    hasMoreData: boolean;
-    lastFacetSelection: FacetSelection;
-    chartSelectionIndex: number;
-    asyncJobStatus?: AsynchronousJobStatus;
-    facetAliases?: Record<string, string>;
-    loadNowStarted: boolean;
-    topLevelControlsState?: TopLevelControlsState;
-    isColumnSelected: string[];
-    selectedRowIndices?: number[];
-    error: SynapseClientError | undefined;
-    isFacetsAvailable: boolean;
-};
 export declare type LockedFacet = {
     facet?: string;
     value?: string;
 };
-export declare type FacetSelection = {
-    columnName: string;
-    facetValue: string;
-    selector: string;
-};
-export declare type QueryWrapperChildProps = {
-    isAllFilterSelectedForFacet?: Record<string, boolean>;
-    isLoading?: boolean;
-    token?: string;
-    entityId?: string;
-    isLoadingNewData?: boolean;
-    executeQueryRequest?: (param: QueryBundleRequest) => void;
-    executeInitialQueryRequest?: () => void;
-    getNextPageOfData?: (queryRequest: QueryBundleRequest) => void;
-    getLastQueryRequest?: () => QueryBundleRequest;
-    getInitQueryRequest?: () => QueryBundleRequest;
-    data?: QueryResultBundle;
-    facet?: string;
-    updateParentState?: <K extends keyof QueryWrapperState>(param: Pick<QueryWrapperState, K>) => void;
-    rgbIndex?: number;
-    unitDescription?: string;
-    facetAliases?: Record<string, string>;
-    lastFacetSelection?: FacetSelection;
-    chartSelectionIndex?: number;
-    asyncJobStatus?: AsynchronousJobStatus;
-    showBarChart?: boolean;
-    hasMoreData?: boolean;
-    topLevelControlsState?: TopLevelControlsState;
-    isColumnSelected?: string[];
-    selectedRowIndices?: number[];
-    error?: SynapseClientError | undefined;
-    lockedFacet?: LockedFacet;
-    isFacetsAvailable?: boolean;
-};
-export declare const QUERY_FILTERS_EXPANDED_CSS: string;
-export declare const QUERY_FILTERS_COLLAPSED_CSS: string;
 /**
- * Class wraps around any Synapse views that are dependent on a query bundle
- * Those classes then take in as props:
- *
- * @class QueryWrapper
- * @extends {React.Component}
+ * Component that manages the state of a Synapse table query. Data can be accessed via QueryContext using
+ * either `useQueryContext` or `QueryContextConsumer`.
  */
-export default class QueryWrapper extends React.Component<QueryWrapperProps, QueryWrapperState> {
-    private componentIndex;
-    constructor(props: QueryWrapperProps);
-    /**
-     * Compute default query request
-     *
-     * @memberof QueryWrapper
-     */
-    componentDidMount(): void;
-    /**
-     * @memberof QueryWrapper
-     */
-    componentDidUpdate(prevProps: QueryWrapperProps): void;
-    /**
-     * Pass down a deep clone (so no side affects on the child's part) of the
-     * last query request made
-     *
-     * @returns
-     * @memberof QueryWrapper
-     */
-    getLastQueryRequest(): QueryBundleRequest;
-    /**
-     * Pass down a deep clone (so no side affects on the child's part) of the
-     * first query request made
-     *
-     * @returns
-     * @memberof QueryWrapper
-     */
-    getInitQueryRequest(): QueryBundleRequest;
-    getSelectedColumns(isReset: boolean, selectColumns?: SelectColumn[]): string[];
-    /**
-     * Execute the given query
-     *
-     * @param {*} queryRequest Query request as specified by
-     *                         https://rest-docs.synapse.org/rest/org/sagebionetworks/repo/model/table/Query.html
-     * @memberof QueryWrapper
-     */
-    executeQueryRequest(queryRequest: QueryBundleRequest): Promise<void>;
-    /**
-     * Grab the next page of data, pulling in 25 more rows.
-     *
-     * @param {*} queryRequest Query request as specified by
-     *                         https://rest-docs.synapse.org/rest/org/sagebionetworks/repo/model/table/Query.html
-     * @memberof QueryWrapper
-     */
-    getNextPageOfData(queryRequest: QueryBundleRequest): Promise<void>;
-    /**
-     * Execute the initial query passed into the component
-     *
-     * @param {*} queryRequest Query request as specified by
-     *                         https://rest-docs.synapse.org/rest/org/sagebionetworks/repo/model/table/Query.html
-     * @memberof QueryWrapper
-     */
-    executeInitialQueryRequest(initQueryRequest?: QueryBundleRequest): void;
-    updateParentState<K extends keyof QueryWrapperState>(update: Pick<QueryWrapperState, K>): void;
-    /**
-     * remove a particular facet name (e.g. study) and its all possible values based on the parameter specified in the url
-     * this is to remove the facet from the charts, search and filter.
-     * @return data: QueryResultBundle
-     */
-    removeLockedFacetData(): QueryResultBundle | undefined;
-    /**
-     * Render the children without any formatting
-     */
-    render(): JSX.Element;
-}
+export declare function QueryWrapper(props: QueryWrapperProps): JSX.Element;