added query plot nav

.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["react-app", "eslint:recommended", "plugin:react/recommended"],
-  "plugins": ["react",  "react-hooks"],
+  "plugins": ["react", "react-hooks"],
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true

.prettierrc

@@ -2,5 +2,6 @@
   "semi": false,
   "trailingComma": "all",
   "singleQuote": true,
-  "printWidth": 80
+  "printWidth": 80,
+  "arrowParens": "avoid"
 }

src/__tests__/lib/containers/DownloadConfirmation.test.tsx

@@ -90,7 +90,7 @@ const resolveAllPending = async (
   await act(
     async (): Promise<any> => {
       await Promise.resolve(wrapper)
-      await new Promise(resolve => setImmediate(resolve))
+      await new Promise((resolve) => setImmediate(resolve))
       wrapper.update()
       return wrapper
     },
@@ -110,7 +110,7 @@ describe('it performs the expected functionality', () => {
   const props: DownloadConfirmationProps = {
     fnClose: mockClose,
     token: '12345',
-    queryBundleRequest: queryBundleRequest,
+    lastQueryRequest: queryBundleRequest,
   }
 
   beforeEach(() => {

src/demo/containers/playground/QueryWrapperPlotNavDemo.tsx

@@ -1,61 +1,65 @@
 import * as React from 'react'
-import { SynapseConstants } from '../../../lib/utils'
-import QueryWrapperPlotNav, { QueryWrapperPlotNavProps } from 'lib/containers/QueryWrapperPlotNav'
+import QueryWrapperPlotNav, {
+  QueryWrapperPlotNavProps,
+} from 'lib/containers/query_wrapper_plot_nav/QueryWrapperPlotNav'
+import { SynapseConstants } from 'lib'
 
 type DemoState = {
   ownerId: string
   isLoading: boolean
   showMarkdown: boolean
-  version: number
-  tableProps: QueryWrapperPlotNavProps
-  activeTab: number
+  propsWithTable: QueryWrapperPlotNavProps
+  propsWithCards: QueryWrapperPlotNavProps
+  showCards: boolean
 }
 /**
  * Demo of features that can be used from src/demo/utils/SynapseClient
  * module
  */
-class QueryWrapperPlotNavDemo extends React.Component<{},
-  DemoState
-> {
+class QueryWrapperPlotNavDemo extends React.Component<{}, DemoState> {
   /**
    * Maintain internal state of user session
    */
   constructor(props: any) {
     super(props)
-    const sql:string =
-      "SELECT * FROM syn16858331"
+    const sql: string = 'SELECT * FROM syn16858331'
     this.state = {
       isLoading: true,
       ownerId: '',
       showMarkdown: true,
-      activeTab: 3,
-      version: 0,
-      tableProps: 
-      {
-        title: 'Test only',
+      showCards: false,
+      propsWithTable: {
+        tableConfiguration: {
+          loadingScreen: <> I'm loading as fast as I can!!!! </>,
+        },
+        rgbIndex: 1,
+        name: 'PlotNav Demo',
+        sqlOperator: '=',
+        sql,
+        entityId: 'syn16858331',
+        // facetsToPlot: ['assay', 'dataType'],
+        loadingScreen: (
+          <div>
+            <div className="spinner"> </div>Im loading as fast I can !!!{' '}
+          </div>
+        ),
+        frontText: 'Showing',
+      },
+      propsWithCards: {
+        rgbIndex: 1,
+        name: 'PlotNav Demo',
         sqlOperator: '=',
-        unitDescription: 'datum',
-        initQueryRequest:{
-          entityId: 'syn16858331',
-          concreteType:
-            'org.sagebionetworks.repo.model.table.QueryBundleRequest',
-          partMask:
-            SynapseConstants.BUNDLE_MASK_QUERY_COLUMN_MODELS |
-            SynapseConstants.BUNDLE_MASK_QUERY_FACETS |
-            SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS |
-            SynapseConstants.BUNDLE_MASK_QUERY_COUNT |
-            SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,
-          query: {
-            sql,
-            limit: 25,
-            offset: 0,
+        sql,
+        entityId: 'syn16858331',
+        cardConfiguration: {
+          type: SynapseConstants.GENERIC_CARD,
+          genericCardSchema: {
+            title: 'id',
+            type: SynapseConstants.STUDY,
           },
         },
-        enableLeftFacetFilter: true,
-        rgbIndex: 5,
-        // facetsToPlot: ['assay', 'dataType'],
-        loadingScreen:<div><div className='spinner'> </div>Im loading as fast I can !!! </div>
-      }
+        frontText: 'Showing',
+      },
     }
     this.handleChange = this.handleChange.bind(this)
     this.removeHandler = this.removeHandler.bind(this)
@@ -74,10 +78,21 @@ class QueryWrapperPlotNavDemo extends React.Component<{},
   }
 
   public render(): JSX.Element {
+    const { showCards } = this.state
+    const propsForPlotNav = this.state.showCards
+      ? this.state.propsWithCards
+      : this.state.propsWithTable
     return (
       <div className="container">
         <h2>Demo of plot nav table</h2>
-        <QueryWrapperPlotNav {...this.state.tableProps} />
+        <button
+          className="SRC-primary-background-color"
+          style={{ color: 'white', padding: 10 }}
+          onClick={() => this.setState({ showCards: !showCards })}
+        >
+          Switch to cards
+        </button>
+        <QueryWrapperPlotNav {...propsForPlotNav} />
       </div>
     )
   }

src/lib/containers/CardContainer.tsx

@@ -23,6 +23,7 @@ export type CardContainerProps = {
   facetAliases?: {}
   getLastQueryRequest?: () => QueryBundleRequest
   getNextPageOfData?: (queryRequest: QueryBundleRequest) => void
+  lastQueryRequest?: QueryBundleRequest
   isLoading?: boolean
   facet?: string
   unitDescription?: string

src/lib/containers/CardContainerLogic.tsx

@@ -43,6 +43,7 @@ export type CommonCardProps = {
 }
 
 export type CardConfiguration = {
+  enableLeftFacetFilter?: boolean
   type: string
   hasInternalLink?: boolean
   iconOptions?: IconOptions
@@ -164,7 +165,7 @@ export default class CardContainerLogic extends React.Component<
       queryRequest,
       this.state.data!,
       this.props.token,
-    ).then(newState => {
+    ).then((newState) => {
       this.setState({
         ...newState,
         isLoading: false,
@@ -233,7 +234,7 @@ export default class CardContainerLogic extends React.Component<
         }
         this.setState(newState)
       })
-      .catch(err => {
+      .catch((err) => {
         console.log('Failed to get data ', err)
       })
   }
@@ -251,6 +252,7 @@ export default class CardContainerLogic extends React.Component<
         token={token}
         getLastQueryRequest={this.getLastQueryRequest}
         getNextPageOfData={this.getNextPageOfData}
+        lastQueryRequest={cloneDeep(this.state.queryRequest)}
         hasMoreData={this.state.hasMoreData}
         isLoading={this.state.isLoading}
       />

src/lib/containers/Facets.tsx

@@ -166,7 +166,7 @@ class Facets extends React.Component<QueryWrapperChildProps, FacetsState> {
     }
     // Find the facetcolumn result according to the input filter
     const facetColumnResult = this.props.data!.facets!.find(
-      el =>
+      (el) =>
         el.columnName === this.props.facet && el.facetType === 'enumeration',
     ) as FacetColumnResultValues
     if (!facetColumnResult) {
@@ -283,7 +283,7 @@ class Facets extends React.Component<QueryWrapperChildProps, FacetsState> {
       )
     }
     const curFacetsIndex = facets.findIndex(
-      curFacet =>
+      (curFacet) =>
         curFacet.columnName === facet && curFacet.facetType === 'enumeration',
     )
     // cast is necessary because filter returns an array of arrays

src/lib/containers/QueryWrapper.tsx

@@ -185,14 +185,15 @@ export default class QueryWrapper extends React.Component<
    * @memberof QueryWrapper
    */
   public executeQueryRequest(queryRequest: QueryBundleRequest) {
+    const clonedQueryRequest = cloneDeep(queryRequest)
     this.setState({
       isLoading: true,
-      lastQueryRequest: cloneDeep(queryRequest),
+      lastQueryRequest: clonedQueryRequest,
     })
 
-    if (queryRequest.query) {
+    if (clonedQueryRequest.query) {
       const stringifiedQuery = encodeURIComponent(
-        JSON.stringify(queryRequest.query),
+        JSON.stringify(clonedQueryRequest.query),
       )
       if (this.props.shouldDeepLink) {
         DeepLinkingUtils.updateUrlWithNewSearchParam(
@@ -203,7 +204,7 @@ export default class QueryWrapper extends React.Component<
       }
     }
     return SynapseClient.getQueryTableResults(
-      queryRequest,
+      clonedQueryRequest,
       this.props.token,
       this.updateParentState,
     )