From 65cb3caa0dff5d0e93f6656fe41e8e584479f22a Mon Sep 17 00:00:00 2001 From: jay-hodgson Date: Thu, 9 Jan 2025 16:28:42 -0800 Subject: [PATCH 01/12] PORTALS-3373: in progress, portal does not currently start --- .../src/config/routesConfig.tsx | 6 ++ .../src/pages/CCKPSearchPage.tsx | 43 +++++++++++++++ .../PortalFullTextSearchField.tsx | 42 ++++++++++++++ .../PortalSearch/PortalSearchTabs.tsx | 55 +++++++++++++++++++ .../src/components/index.ts | 4 ++ .../QueryWrapperPlotNav.tsx | 38 +++++++++---- .../src/utils/functions/SqlFunctions.ts | 13 +++++ 7 files changed, 189 insertions(+), 12 deletions(-) create mode 100644 apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx create mode 100644 apps/synapse-portal-framework/src/components/PortalSearch/PortalFullTextSearchField.tsx create mode 100644 apps/synapse-portal-framework/src/components/PortalSearch/PortalSearchTabs.tsx diff --git a/apps/portals/cancercomplexity/src/config/routesConfig.tsx b/apps/portals/cancercomplexity/src/config/routesConfig.tsx index dc800aeed1..051f422ce4 100644 --- a/apps/portals/cancercomplexity/src/config/routesConfig.tsx +++ b/apps/portals/cancercomplexity/src/config/routesConfig.tsx @@ -22,6 +22,7 @@ import { onIndividualThemeBarPlotPointClick, onPointClick, } from './synapseConfigs/onPointClick' +import { CCKPSearchPage, searchPageChildRoutes } from 'src/pages/CCKPSearchPage' const routes: RouteObject[] = [ { @@ -235,6 +236,11 @@ const routes: RouteObject[] = [ path: 'MC2Supplement', element: , }, + { + path: 'Search', + element: , + children: searchPageChildRoutes, + }, ], }, ] diff --git a/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx b/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx new file mode 100644 index 0000000000..a9f18d1b19 --- /dev/null +++ b/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx @@ -0,0 +1,43 @@ +import { + PortalSearchTabConfig, + PortalSearchTabs, +} from '@sage-bionetworks/synapse-portal-framework/components/PortalSearch/PortalSearchTabs' +import { PortalFullTextSearchField } from '@sage-bionetworks/synapse-portal-framework/components/PortalSearch/PortalFullTextSearchField' + +import RedirectWithQuery from '@sage-bionetworks/synapse-portal-framework/components/RedirectWithQuery' +import { useGetPortalComponentSearchParams } from '@sage-bionetworks/synapse-portal-framework/utils/UseGetPortalComponentSearchParams' +import { Outlet, RouteObject } from 'react-router-dom' +import { grantQueryWrapperPlotNavProps } from 'src/config/synapseConfigs/grants' +import { QueryWrapperPlotNav } from 'synapse-react-client' +export const searchPageTabs: PortalSearchTabConfig[] = [ + { + title: 'Grants', + path: 'Grants', + tooltip: 'Search Grants', + }, +] + +export const searchPageChildRoutes: RouteObject[] = [ + { + index: true, + element: , + }, + { + path: searchPageTabs[0].path, + element: , + }, +] + +export function CCKPSearchPage(props: React.PropsWithChildren) { + const { children } = props + const searchParams = useGetPortalComponentSearchParams() + // on search field value update, update the special search parameter FTS_SEARCH_TERM, which the QueryWrapperPlotNav will load as the search term + return ( + <> + + + {children} + + + ) +} diff --git a/apps/synapse-portal-framework/src/components/PortalSearch/PortalFullTextSearchField.tsx b/apps/synapse-portal-framework/src/components/PortalSearch/PortalFullTextSearchField.tsx new file mode 100644 index 0000000000..4271d37f0e --- /dev/null +++ b/apps/synapse-portal-framework/src/components/PortalSearch/PortalFullTextSearchField.tsx @@ -0,0 +1,42 @@ +import { useState } from 'react' +import SearchIcon from '@mui/icons-material/Search' +import { InputAdornment, TextField } from '@mui/material' +import { useSearchParams } from 'react-router-dom' +import { FTS_SEARCH_PARAM_KEY } from 'synapse-react-client/utils/functions/SqlFunctions' + +export function PortalFullTextSearchField() { + const [searchParams, setSearchParams] = useSearchParams() + const [searchInput, setSearchInput] = useState( + searchParams.get(FTS_SEARCH_PARAM_KEY), + ) + + return ( + { + setSearchInput(event.target.value) + }} + onKeyDown={(event: any) => { + if (event.key === 'Enter') { + const trimmedInput = event.target.value.trim() + setSearchParams({ FTS_SEARCH_PARAM_KEY: trimmedInput }) + } + }} + InputProps={{ + startAdornment: ( + + + + ), + }} + sx={{ + maxWidth: { xs: '100%', md: '350px' }, + flex: '1 1 350px', + }} + /> + ) +} + +export default PortalFullTextSearchField diff --git a/apps/synapse-portal-framework/src/components/PortalSearch/PortalSearchTabs.tsx b/apps/synapse-portal-framework/src/components/PortalSearch/PortalSearchTabs.tsx new file mode 100644 index 0000000000..faed870ae0 --- /dev/null +++ b/apps/synapse-portal-framework/src/components/PortalSearch/PortalSearchTabs.tsx @@ -0,0 +1,55 @@ +import { Tooltip, Chip } from '@mui/material' +import { NavLink, useLocation } from 'react-router-dom' + +export type PortalSearchTabConfig = { + path: string + title: string + tooltip?: string + count?: number +} + +export type PortalSearchTabUIProps = { + tabConfig: PortalSearchTabConfig[] +} + +function PortalSearchTab(props: PortalSearchTabConfig) { + const { path, title, tooltip, count } = props + const location = useLocation() + + return ( + + + {title} + {count !== undefined && ( + + )} + + + ) +} + +export function PortalSearchTabs(props: PortalSearchTabUIProps) { + const { tabConfig } = props + + return ( +
+ {tabConfig.map(config => ( + + ))} +
+ ) +} diff --git a/apps/synapse-portal-framework/src/components/index.ts b/apps/synapse-portal-framework/src/components/index.ts index b8672a045c..ba0430ad7e 100644 --- a/apps/synapse-portal-framework/src/components/index.ts +++ b/apps/synapse-portal-framework/src/components/index.ts @@ -20,6 +20,8 @@ import Image from './Image' import RedirectWithQuery from './RedirectWithQuery' import RedirectToURL from './RedirectToURL' import { Navigate as Redirect } from 'react-router-dom' +import { PortalSearchTabs } from './PortalSearch/PortalSearchTabs' +import { PortalFullTextSearchField } from './PortalSearch/PortalFullTextSearchField' import Header from './Header' import ChallengeParticipantGoogleMap from './challengeportal/ChallengeParticipantGoogleMap' import ChallengeDetailPageWrapper from './challengeportal/ChallengeDetailPageWrapper' @@ -60,6 +62,8 @@ const PortalComponents = { ChallengeDataDownloadWrapper, SynapseComponentCollapse: ComponentCollapse, SurveyToast, + PortalSearchTabs, + PortalFullTextSearchField, } export default PortalComponents diff --git a/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx b/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx index 87b9d15f91..9338c6b501 100644 --- a/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx +++ b/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx @@ -273,6 +273,30 @@ function QueryWrapperPlotNavContents(props: QueryWrapperPlotNavContentsProps) { ) } +export const getQueryRequest = ({ + entityId, + query, +}: { + entityId: string + query: Query +}) => { + const request: QueryBundleRequest = { + entityId, + concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest', + partMask: + SynapseConstants.BUNDLE_MASK_QUERY_RESULTS | + SynapseConstants.BUNDLE_MASK_QUERY_COUNT | + SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS | + SynapseConstants.BUNDLE_MASK_QUERY_MAX_ROWS_PER_PAGE | + SynapseConstants.BUNDLE_MASK_QUERY_COLUMN_MODELS | + SynapseConstants.BUNDLE_MASK_QUERY_FACETS | + SynapseConstants.BUNDLE_MASK_SUM_FILES_SIZE_BYTES | + SynapseConstants.BUNDLE_MASK_LAST_UPDATED_ON, + query, + } + return request +} + function QueryWrapperPlotNav(props: QueryWrapperPlotNavProps) { const { searchParams, @@ -312,20 +336,10 @@ function QueryWrapperPlotNav(props: QueryWrapperPlotNavProps) { } const { data: entity } = useGetEntity(entityId, versionNumber) - const initQueryRequest: QueryBundleRequest = { + const initQueryRequest: QueryBundleRequest = getQueryRequest({ entityId, - concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest', - partMask: - SynapseConstants.BUNDLE_MASK_QUERY_RESULTS | - SynapseConstants.BUNDLE_MASK_QUERY_COUNT | - SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS | - SynapseConstants.BUNDLE_MASK_QUERY_MAX_ROWS_PER_PAGE | - SynapseConstants.BUNDLE_MASK_QUERY_COLUMN_MODELS | - SynapseConstants.BUNDLE_MASK_QUERY_FACETS | - SynapseConstants.BUNDLE_MASK_SUM_FILES_SIZE_BYTES | - SynapseConstants.BUNDLE_MASK_LAST_UPDATED_ON, query, - } + }) const isFullTextSearchEnabled = (entity && isTable(entity) && entity.isSearchEnabled) ?? false diff --git a/packages/synapse-react-client/src/utils/functions/SqlFunctions.ts b/packages/synapse-react-client/src/utils/functions/SqlFunctions.ts index c56887de1e..97bbe9cbf2 100644 --- a/packages/synapse-react-client/src/utils/functions/SqlFunctions.ts +++ b/packages/synapse-react-client/src/utils/functions/SqlFunctions.ts @@ -6,6 +6,7 @@ import { QueryFilter, Row, SelectColumn, + TextMatchesQueryFilter, } from '@sage-bionetworks/synapse-types' import { SYNAPSE_ENTITY_ID_REGEX } from './RegularExpressions' @@ -29,6 +30,10 @@ export const getIgnoredQueryFilterSearchParamKey = ( ) => { return `__${namespace ?? ''}_${key}` } + +// Special search parameter key that will automatically apply a FTS search term to a Query Wrapper if present +export const FTS_SEARCH_PARAM_KEY = 'FTS_SEARCH_TERM' + /** * Look in local storage for a set of QueryFilters to apply. In addition, given the search params, * generate a set of QueryFilters to narrow the the query to view just related data. @@ -61,6 +66,14 @@ export const getAdditionalFilters = ( Object.keys(searchParams || {}) .filter(key => !isQueryWrapperKey(key)) .map(key => { + if (key == FTS_SEARCH_PARAM_KEY) { + const filter: TextMatchesQueryFilter = { + concreteType: + 'org.sagebionetworks.repo.model.table.TextMatchesQueryFilter', + searchExpression: searchParams[key], + } + return filter + } switch (operator) { case ColumnSingleValueFilterOperator.EQUAL: { const filter: ColumnSingleValueQueryFilter = { From 34975a758eee282e6254254afe131f35ec0d5905 Mon Sep 17 00:00:00 2001 From: jay-hodgson Date: Thu, 9 Jan 2025 17:08:53 -0800 Subject: [PATCH 02/12] small progress --- apps/portals/cancercomplexity/package.json | 1 + .../cancercomplexity/src/pages/CCKPSearchPage.tsx | 5 +++-- .../PortalSearch/PortalFullTextSearchField.tsx | 15 ++++++++++----- .../src/utils/functions/SqlFunctions.ts | 4 ++-- 4 files changed, 16 insertions(+), 9 deletions(-) diff --git a/apps/portals/cancercomplexity/package.json b/apps/portals/cancercomplexity/package.json index 8505fd1619..a1321b1c6c 100644 --- a/apps/portals/cancercomplexity/package.json +++ b/apps/portals/cancercomplexity/package.json @@ -5,6 +5,7 @@ "type": "module", "dependencies": { "@sage-bionetworks/synapse-types": "workspace:*", + "@mui/material": "^5.15.13", "katex": "^0.16.10", "@sage-bionetworks/synapse-portal-framework": "workspace:*", "react": "^18.2.0", diff --git a/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx b/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx index a9f18d1b19..e1cd97b1b1 100644 --- a/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx +++ b/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx @@ -4,6 +4,7 @@ import { } from '@sage-bionetworks/synapse-portal-framework/components/PortalSearch/PortalSearchTabs' import { PortalFullTextSearchField } from '@sage-bionetworks/synapse-portal-framework/components/PortalSearch/PortalFullTextSearchField' +import { Box } from '@mui/material' import RedirectWithQuery from '@sage-bionetworks/synapse-portal-framework/components/RedirectWithQuery' import { useGetPortalComponentSearchParams } from '@sage-bionetworks/synapse-portal-framework/utils/UseGetPortalComponentSearchParams' import { Outlet, RouteObject } from 'react-router-dom' @@ -33,11 +34,11 @@ export function CCKPSearchPage(props: React.PropsWithChildren) { const searchParams = useGetPortalComponentSearchParams() // on search field value update, update the special search parameter FTS_SEARCH_TERM, which the QueryWrapperPlotNav will load as the search term return ( - <> + {children} - + ) } diff --git a/apps/synapse-portal-framework/src/components/PortalSearch/PortalFullTextSearchField.tsx b/apps/synapse-portal-framework/src/components/PortalSearch/PortalFullTextSearchField.tsx index 4271d37f0e..d0668b8901 100644 --- a/apps/synapse-portal-framework/src/components/PortalSearch/PortalFullTextSearchField.tsx +++ b/apps/synapse-portal-framework/src/components/PortalSearch/PortalFullTextSearchField.tsx @@ -2,12 +2,12 @@ import { useState } from 'react' import SearchIcon from '@mui/icons-material/Search' import { InputAdornment, TextField } from '@mui/material' import { useSearchParams } from 'react-router-dom' -import { FTS_SEARCH_PARAM_KEY } from 'synapse-react-client/utils/functions/SqlFunctions' +import { FTS_SEARCH_TERM } from 'synapse-react-client/utils/functions/SqlFunctions' export function PortalFullTextSearchField() { const [searchParams, setSearchParams] = useSearchParams() const [searchInput, setSearchInput] = useState( - searchParams.get(FTS_SEARCH_PARAM_KEY), + searchParams.get(FTS_SEARCH_TERM), ) return ( @@ -21,7 +21,7 @@ export function PortalFullTextSearchField() { onKeyDown={(event: any) => { if (event.key === 'Enter') { const trimmedInput = event.target.value.trim() - setSearchParams({ FTS_SEARCH_PARAM_KEY: trimmedInput }) + setSearchParams({ FTS_SEARCH_TERM: trimmedInput }) } }} InputProps={{ @@ -32,8 +32,13 @@ export function PortalFullTextSearchField() { ), }} sx={{ - maxWidth: { xs: '100%', md: '350px' }, - flex: '1 1 350px', + width: '100%', + boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)', + border: '1px solid', + borderColor: 'grey.300', + '& .MuiOutlinedInput-root': { + backgroundColor: 'white', + }, }} /> ) diff --git a/packages/synapse-react-client/src/utils/functions/SqlFunctions.ts b/packages/synapse-react-client/src/utils/functions/SqlFunctions.ts index 97bbe9cbf2..5395d393fb 100644 --- a/packages/synapse-react-client/src/utils/functions/SqlFunctions.ts +++ b/packages/synapse-react-client/src/utils/functions/SqlFunctions.ts @@ -32,7 +32,7 @@ export const getIgnoredQueryFilterSearchParamKey = ( } // Special search parameter key that will automatically apply a FTS search term to a Query Wrapper if present -export const FTS_SEARCH_PARAM_KEY = 'FTS_SEARCH_TERM' +export const FTS_SEARCH_TERM = 'FTS_SEARCH_TERM' /** * Look in local storage for a set of QueryFilters to apply. In addition, given the search params, @@ -66,7 +66,7 @@ export const getAdditionalFilters = ( Object.keys(searchParams || {}) .filter(key => !isQueryWrapperKey(key)) .map(key => { - if (key == FTS_SEARCH_PARAM_KEY) { + if (key == FTS_SEARCH_TERM) { const filter: TextMatchesQueryFilter = { concreteType: 'org.sagebionetworks.repo.model.table.TextMatchesQueryFilter', From cffeec25c13b38a668bfc4b695618ca8838fa5b0 Mon Sep 17 00:00:00 2001 From: jay-hodgson Date: Thu, 9 Jan 2025 17:50:00 -0800 Subject: [PATCH 03/12] update StandaloneQueryWrapper to support a card or table configuration output. feeding it a QueryWrapperPlotNav config should show the appropriate rendering --- .../src/pages/CCKPSearchPage.tsx | 11 +++++---- .../StandaloneQueryWrapper.tsx | 23 ++++++++++++++----- pnpm-lock.yaml | 3 +++ 3 files changed, 26 insertions(+), 11 deletions(-) diff --git a/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx b/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx index e1cd97b1b1..324ad986ce 100644 --- a/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx +++ b/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx @@ -3,13 +3,11 @@ import { PortalSearchTabs, } from '@sage-bionetworks/synapse-portal-framework/components/PortalSearch/PortalSearchTabs' import { PortalFullTextSearchField } from '@sage-bionetworks/synapse-portal-framework/components/PortalSearch/PortalFullTextSearchField' - +import { SearchParamAwareStandaloneQueryWrapper } from '@sage-bionetworks/synapse-portal-framework/components/PortalSearch/SearchParamAwareStandaloneQueryWrapper' import { Box } from '@mui/material' import RedirectWithQuery from '@sage-bionetworks/synapse-portal-framework/components/RedirectWithQuery' -import { useGetPortalComponentSearchParams } from '@sage-bionetworks/synapse-portal-framework/utils/UseGetPortalComponentSearchParams' import { Outlet, RouteObject } from 'react-router-dom' import { grantQueryWrapperPlotNavProps } from 'src/config/synapseConfigs/grants' -import { QueryWrapperPlotNav } from 'synapse-react-client' export const searchPageTabs: PortalSearchTabConfig[] = [ { title: 'Grants', @@ -25,13 +23,16 @@ export const searchPageChildRoutes: RouteObject[] = [ }, { path: searchPageTabs[0].path, - element: , + element: ( + + ), }, ] export function CCKPSearchPage(props: React.PropsWithChildren) { const { children } = props - const searchParams = useGetPortalComponentSearchParams() // on search field value update, update the special search parameter FTS_SEARCH_TERM, which the QueryWrapperPlotNav will load as the search term return ( diff --git a/packages/synapse-react-client/src/components/StandaloneQueryWrapper/StandaloneQueryWrapper.tsx b/packages/synapse-react-client/src/components/StandaloneQueryWrapper/StandaloneQueryWrapper.tsx index bcdee1dbf9..fbe8c95fd3 100644 --- a/packages/synapse-react-client/src/components/StandaloneQueryWrapper/StandaloneQueryWrapper.tsx +++ b/packages/synapse-react-client/src/components/StandaloneQueryWrapper/StandaloneQueryWrapper.tsx @@ -18,6 +18,7 @@ import { import { QueryWrapper, QueryWrapperProps } from '../QueryWrapper/QueryWrapper' import { Operator, + QueryWrapperPlotNavProps, SearchParams, } from '../QueryWrapperPlotNav/QueryWrapperPlotNav' import { RowSetView } from '../QueryWrapperPlotNav/RowSetView' @@ -51,7 +52,8 @@ type StandaloneQueryWrapperOwnProps = { Pick< QueryWrapperProps, 'fileIdColumnName' | 'fileNameColumnName' | 'fileVersionColumnName' - > + > & + Pick export type StandaloneQueryWrapperProps = SynapseTableConfiguration & SearchParams & @@ -100,6 +102,8 @@ function StandaloneQueryWrapper(props: StandaloneQueryWrapperProps) { noContentPlaceholderType = showTopLevelControls ? NoContentPlaceholderType.INTERACTIVE : NoContentPlaceholderType.STATIC, + cardConfiguration, + tableConfiguration, ...rest } = props @@ -184,12 +188,19 @@ function StandaloneQueryWrapper(props: StandaloneQueryWrapperProps) { {showTopLevelControls && ( )} + ) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 04d319add6..e0cd63f205 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -431,6 +431,9 @@ importers: apps/portals/cancercomplexity: dependencies: + '@mui/material': + specifier: ^5.15.13 + version: 5.15.13(@emotion/react@11.11.4(@types/react@18.3.12)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.4(@types/react@18.3.12)(react@18.2.0))(@types/react@18.3.12)(react@18.2.0))(@types/react@18.3.12)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@sage-bionetworks/synapse-portal-framework': specifier: workspace:* version: link:../../synapse-portal-framework From d5e4b2c420f7e75177a5e08fc78c500138e2e1bc Mon Sep 17 00:00:00 2001 From: jay-hodgson Date: Thu, 9 Jan 2025 17:54:53 -0800 Subject: [PATCH 04/12] show example with grants and people FTS --- .../src/pages/CCKPSearchPage.tsx | 14 ++++++++++++++ .../SearchParamAwareStandaloneQueryWrapper.tsx | 18 ++++++++++++++++++ 2 files changed, 32 insertions(+) create mode 100644 apps/synapse-portal-framework/src/components/PortalSearch/SearchParamAwareStandaloneQueryWrapper.tsx diff --git a/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx b/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx index 324ad986ce..723c7b9a1c 100644 --- a/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx +++ b/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx @@ -8,12 +8,18 @@ import { Box } from '@mui/material' import RedirectWithQuery from '@sage-bionetworks/synapse-portal-framework/components/RedirectWithQuery' import { Outlet, RouteObject } from 'react-router-dom' import { grantQueryWrapperPlotNavProps } from 'src/config/synapseConfigs/grants' +import { peopleQueryWrapperPlotNavProps } from 'src/config/synapseConfigs' export const searchPageTabs: PortalSearchTabConfig[] = [ { title: 'Grants', path: 'Grants', tooltip: 'Search Grants', }, + { + title: 'People', + path: 'People', + tooltip: 'Search People', + }, ] export const searchPageChildRoutes: RouteObject[] = [ @@ -29,6 +35,14 @@ export const searchPageChildRoutes: RouteObject[] = [ /> ), }, + { + path: searchPageTabs[1].path, + element: ( + + ), + }, ] export function CCKPSearchPage(props: React.PropsWithChildren) { diff --git a/apps/synapse-portal-framework/src/components/PortalSearch/SearchParamAwareStandaloneQueryWrapper.tsx b/apps/synapse-portal-framework/src/components/PortalSearch/SearchParamAwareStandaloneQueryWrapper.tsx new file mode 100644 index 0000000000..82dca72b57 --- /dev/null +++ b/apps/synapse-portal-framework/src/components/PortalSearch/SearchParamAwareStandaloneQueryWrapper.tsx @@ -0,0 +1,18 @@ +import { useSearchParams } from 'react-router-dom' +import { StandaloneQueryWrapper } from 'synapse-react-client' +import { StandaloneQueryWrapperProps } from 'synapse-react-client' + +export function SearchParamAwareStandaloneQueryWrapper( + props: StandaloneQueryWrapperProps, +) { + const [searchParams] = useSearchParams() + + return ( + + ) +} + +export default SearchParamAwareStandaloneQueryWrapper From 371b779e33bbbc7d032700632430eceb417034ae Mon Sep 17 00:00:00 2001 From: jay-hodgson Date: Thu, 9 Jan 2025 18:40:42 -0800 Subject: [PATCH 05/12] fix tab selection and chip style --- .../src/pages/CCKPSearchPage.tsx | 2 - .../components/Explore/ExploreWrapperTabs.tsx | 2 +- .../PortalFullTextSearchField.tsx | 1 + .../PortalSearch/PortalSearchTabs.tsx | 112 ++++++++++++------ 4 files changed, 75 insertions(+), 42 deletions(-) diff --git a/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx b/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx index 723c7b9a1c..4b036ce0b2 100644 --- a/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx +++ b/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx @@ -13,12 +13,10 @@ export const searchPageTabs: PortalSearchTabConfig[] = [ { title: 'Grants', path: 'Grants', - tooltip: 'Search Grants', }, { title: 'People', path: 'People', - tooltip: 'Search People', }, ] diff --git a/apps/synapse-portal-framework/src/components/Explore/ExploreWrapperTabs.tsx b/apps/synapse-portal-framework/src/components/Explore/ExploreWrapperTabs.tsx index 0b8f28e92b..32a9a66a6b 100644 --- a/apps/synapse-portal-framework/src/components/Explore/ExploreWrapperTabs.tsx +++ b/apps/synapse-portal-framework/src/components/Explore/ExploreWrapperTabs.tsx @@ -9,7 +9,7 @@ import { import { useLocation, useNavigate } from 'react-router-dom' import { ExploreWrapperProps } from './ExploreWrapperProps' -function CustomScrollButton(props: TabScrollButtonProps) { +export function CustomScrollButton(props: TabScrollButtonProps) { if (props.disabled) { return <> } diff --git a/apps/synapse-portal-framework/src/components/PortalSearch/PortalFullTextSearchField.tsx b/apps/synapse-portal-framework/src/components/PortalSearch/PortalFullTextSearchField.tsx index d0668b8901..a3c5443cf0 100644 --- a/apps/synapse-portal-framework/src/components/PortalSearch/PortalFullTextSearchField.tsx +++ b/apps/synapse-portal-framework/src/components/PortalSearch/PortalFullTextSearchField.tsx @@ -39,6 +39,7 @@ export function PortalFullTextSearchField() { '& .MuiOutlinedInput-root': { backgroundColor: 'white', }, + mb: '20px', }} /> ) diff --git a/apps/synapse-portal-framework/src/components/PortalSearch/PortalSearchTabs.tsx b/apps/synapse-portal-framework/src/components/PortalSearch/PortalSearchTabs.tsx index faed870ae0..57b2cb429a 100644 --- a/apps/synapse-portal-framework/src/components/PortalSearch/PortalSearchTabs.tsx +++ b/apps/synapse-portal-framework/src/components/PortalSearch/PortalSearchTabs.tsx @@ -1,55 +1,89 @@ -import { Tooltip, Chip } from '@mui/material' -import { NavLink, useLocation } from 'react-router-dom' +import { Box, Tab, Tabs, useMediaQuery, useTheme, Chip } from '@mui/material' +import { useNavigate, useLocation } from 'react-router-dom' +import { CustomScrollButton } from '../Explore/ExploreWrapperTabs' export type PortalSearchTabConfig = { path: string title: string - tooltip?: string count?: number } export type PortalSearchTabUIProps = { tabConfig: PortalSearchTabConfig[] } - -function PortalSearchTab(props: PortalSearchTabConfig) { - const { path, title, tooltip, count } = props +export function PortalSearchTabs(props: PortalSearchTabUIProps) { + const { tabConfig } = props const location = useLocation() - + const theme = useTheme() + const isMobileView = useMediaQuery(theme.breakpoints.down('sm')) + const navigate = useNavigate() return ( - - - {title} - {count !== undefined && ( - + {tabConfig.map(({ path, title, count }) => { + const targetPathname = `/Search/${path}` + return ( + + {title}{' '} + {count !== undefined && ( + + )} + + } + onClick={() => + navigate({ + pathname: targetPathname, + search: location.search, + }) + } sx={{ - backgroundColor: 'tertiary.500', - color: 'grey.900', - height: '21px', + transition: 'all 400ms', + fontSize: '16px', + fontWeight: 700, + color: 'grey.700', + minWidth: { xs: '100%', sm: 'unset' }, + py: 1, + px: 0, + borderBottom: '4px solid', + borderBottomColor: 'transparent', + '&.Mui-selected': { + color: 'secondary.main', + borderBottomColor: 'secondary.main', + }, + '&:hover:not(.Mui-selected)': { + color: 'grey.800', + }, }} - > - )} - - - ) -} - -export function PortalSearchTabs(props: PortalSearchTabUIProps) { - const { tabConfig } = props - - return ( -
- {tabConfig.map(config => ( - - ))} -
+ /> + ) + })} + ) } From 7f07599f5ac6f458428f7d4e6c1db03f1739cb4f Mon Sep 17 00:00:00 2001 From: jay-hodgson Date: Fri, 10 Jan 2025 10:03:56 -0800 Subject: [PATCH 06/12] execute queries for all tabs all the time to render the count --- .../src/config/routesConfig.tsx | 1 - .../src/pages/CCKPSearchPage.tsx | 55 ++++++++++++++----- .../PortalSearch/PortalSearchTabs.tsx | 2 +- ...SearchParamAwareStandaloneQueryWrapper.tsx | 18 ++++-- .../StandaloneQueryWrapper.tsx | 5 +- .../src/utils/functions/SqlFunctions.ts | 7 ++- 6 files changed, 65 insertions(+), 23 deletions(-) diff --git a/apps/portals/cancercomplexity/src/config/routesConfig.tsx b/apps/portals/cancercomplexity/src/config/routesConfig.tsx index 051f422ce4..3e086415ec 100644 --- a/apps/portals/cancercomplexity/src/config/routesConfig.tsx +++ b/apps/portals/cancercomplexity/src/config/routesConfig.tsx @@ -238,7 +238,6 @@ const routes: RouteObject[] = [ }, { path: 'Search', - element: , children: searchPageChildRoutes, }, ], diff --git a/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx b/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx index 4b036ce0b2..1467257645 100644 --- a/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx +++ b/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx @@ -9,6 +9,8 @@ import RedirectWithQuery from '@sage-bionetworks/synapse-portal-framework/compon import { Outlet, RouteObject } from 'react-router-dom' import { grantQueryWrapperPlotNavProps } from 'src/config/synapseConfigs/grants' import { peopleQueryWrapperPlotNavProps } from 'src/config/synapseConfigs' +import { QueryResultBundle } from '@sage-bionetworks/synapse-types' +import { useState } from 'react' export const searchPageTabs: PortalSearchTabConfig[] = [ { title: 'Grants', @@ -27,30 +29,55 @@ export const searchPageChildRoutes: RouteObject[] = [ }, { path: searchPageTabs[0].path, - element: ( - - ), + element: , }, { path: searchPageTabs[1].path, - element: ( - - ), + element: , }, ] -export function CCKPSearchPage(props: React.PropsWithChildren) { - const { children } = props +export type CCKPSearchPageProps = { + selectedTabIndex: number +} + +function getQueryCount(queryResultBundleJSON: string) { + const queryResultBundle = JSON.parse( + queryResultBundleJSON, + ) as QueryResultBundle + const { queryCount } = queryResultBundle + return queryCount +} + +export function CCKPSearchPage(props: CCKPSearchPageProps) { + const { selectedTabIndex } = props + const [searchPageTabsState, setSearchPageTabsState] = + useState(searchPageTabs) // on search field value update, update the special search parameter FTS_SEARCH_TERM, which the QueryWrapperPlotNav will load as the search term return ( - - {children} + + { + searchPageTabs[0].count = getQueryCount(newQueryResultBundleJSON) + setSearchPageTabsState([...searchPageTabs]) + }, + }} + /> + { + searchPageTabs[1].count = getQueryCount(newQueryResultBundleJSON) + setSearchPageTabsState([...searchPageTabs]) + }, + }} + /> ) diff --git a/apps/synapse-portal-framework/src/components/PortalSearch/PortalSearchTabs.tsx b/apps/synapse-portal-framework/src/components/PortalSearch/PortalSearchTabs.tsx index 57b2cb429a..c4979eb583 100644 --- a/apps/synapse-portal-framework/src/components/PortalSearch/PortalSearchTabs.tsx +++ b/apps/synapse-portal-framework/src/components/PortalSearch/PortalSearchTabs.tsx @@ -46,7 +46,7 @@ export function PortalSearchTabs(props: PortalSearchTabUIProps) { {title}{' '} {count !== undefined && ( + + + ) } diff --git a/packages/synapse-react-client/src/components/StandaloneQueryWrapper/StandaloneQueryWrapper.tsx b/packages/synapse-react-client/src/components/StandaloneQueryWrapper/StandaloneQueryWrapper.tsx index fbe8c95fd3..cedbea5ed9 100644 --- a/packages/synapse-react-client/src/components/StandaloneQueryWrapper/StandaloneQueryWrapper.tsx +++ b/packages/synapse-react-client/src/components/StandaloneQueryWrapper/StandaloneQueryWrapper.tsx @@ -51,7 +51,10 @@ type StandaloneQueryWrapperOwnProps = { > & Pick< QueryWrapperProps, - 'fileIdColumnName' | 'fileNameColumnName' | 'fileVersionColumnName' + | 'fileIdColumnName' + | 'fileNameColumnName' + | 'fileVersionColumnName' + | 'onQueryResultBundleChange' > & Pick diff --git a/packages/synapse-react-client/src/utils/functions/SqlFunctions.ts b/packages/synapse-react-client/src/utils/functions/SqlFunctions.ts index 5395d393fb..4823716e2a 100644 --- a/packages/synapse-react-client/src/utils/functions/SqlFunctions.ts +++ b/packages/synapse-react-client/src/utils/functions/SqlFunctions.ts @@ -64,7 +64,12 @@ export const getAdditionalFilters = ( key.startsWith('QueryWrapper') || key.startsWith('__') additionalFilters = additionalFilters.concat( Object.keys(searchParams || {}) - .filter(key => !isQueryWrapperKey(key)) + .filter( + key => + !isQueryWrapperKey(key) && + searchParams[key] != undefined && + searchParams[key].trim() != '', + ) .map(key => { if (key == FTS_SEARCH_TERM) { const filter: TextMatchesQueryFilter = { From 8d10040c45904cd0250dd40ffbda0daa425200e5 Mon Sep 17 00:00:00 2001 From: jay-hodgson Date: Fri, 10 Jan 2025 10:36:16 -0800 Subject: [PATCH 07/12] render the QueryWrapper only if items are not being rendered --- .../src/pages/CCKPSearchPage.tsx | 85 +++++++++++++++++-- ...SearchParamAwareStandaloneQueryWrapper.tsx | 37 ++++++-- .../StandaloneQueryWrapper.tsx | 2 +- 3 files changed, 109 insertions(+), 15 deletions(-) diff --git a/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx b/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx index 1467257645..e96c95a239 100644 --- a/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx +++ b/apps/portals/cancercomplexity/src/pages/CCKPSearchPage.tsx @@ -7,8 +7,7 @@ import { SearchParamAwareStandaloneQueryWrapper } from '@sage-bionetworks/synaps import { Box } from '@mui/material' import RedirectWithQuery from '@sage-bionetworks/synapse-portal-framework/components/RedirectWithQuery' import { Outlet, RouteObject } from 'react-router-dom' -import { grantQueryWrapperPlotNavProps } from 'src/config/synapseConfigs/grants' -import { peopleQueryWrapperPlotNavProps } from 'src/config/synapseConfigs' +import cckpConfigs from 'src/config/synapseConfigs' import { QueryResultBundle } from '@sage-bionetworks/synapse-types' import { useState } from 'react' export const searchPageTabs: PortalSearchTabConfig[] = [ @@ -20,6 +19,22 @@ export const searchPageTabs: PortalSearchTabConfig[] = [ title: 'People', path: 'People', }, + { + title: 'Publications', + path: 'Publications', + }, + { + title: 'Datasets', + path: 'Datasets', + }, + { + title: 'Tools', + path: 'Tools', + }, + { + title: 'Educational Resources', + path: 'EducationalResources', + }, ] export const searchPageChildRoutes: RouteObject[] = [ @@ -35,6 +50,22 @@ export const searchPageChildRoutes: RouteObject[] = [ path: searchPageTabs[1].path, element: , }, + { + path: searchPageTabs[2].path, + element: , + }, + { + path: searchPageTabs[3].path, + element: , + }, + { + path: searchPageTabs[4].path, + element: , + }, + { + path: searchPageTabs[5].path, + element: , + }, ] export type CCKPSearchPageProps = { @@ -51,6 +82,8 @@ function getQueryCount(queryResultBundleJSON: string) { export function CCKPSearchPage(props: CCKPSearchPageProps) { const { selectedTabIndex } = props + const { datasets, education, grants, people, publications, tools } = + cckpConfigs const [searchPageTabsState, setSearchPageTabsState] = useState(searchPageTabs) // on search field value update, update the special search parameter FTS_SEARCH_TERM, which the QueryWrapperPlotNav will load as the search term @@ -59,9 +92,9 @@ export function CCKPSearchPage(props: CCKPSearchPageProps) { { searchPageTabs[0].count = getQueryCount(newQueryResultBundleJSON) setSearchPageTabsState([...searchPageTabs]) @@ -69,15 +102,55 @@ export function CCKPSearchPage(props: CCKPSearchPageProps) { }} /> { searchPageTabs[1].count = getQueryCount(newQueryResultBundleJSON) setSearchPageTabsState([...searchPageTabs]) }, }} /> + { + searchPageTabs[2].count = getQueryCount(newQueryResultBundleJSON) + setSearchPageTabsState([...searchPageTabs]) + }, + }} + /> + { + searchPageTabs[3].count = getQueryCount(newQueryResultBundleJSON) + setSearchPageTabsState([...searchPageTabs]) + }, + }} + /> + { + searchPageTabs[4].count = getQueryCount(newQueryResultBundleJSON) + setSearchPageTabsState([...searchPageTabs]) + }, + }} + /> + { + searchPageTabs[5].count = getQueryCount(newQueryResultBundleJSON) + setSearchPageTabsState([...searchPageTabs]) + }, + }} + /> ) diff --git a/apps/synapse-portal-framework/src/components/PortalSearch/SearchParamAwareStandaloneQueryWrapper.tsx b/apps/synapse-portal-framework/src/components/PortalSearch/SearchParamAwareStandaloneQueryWrapper.tsx index 38536a4d02..7c8ac45daf 100644 --- a/apps/synapse-portal-framework/src/components/PortalSearch/SearchParamAwareStandaloneQueryWrapper.tsx +++ b/apps/synapse-portal-framework/src/components/PortalSearch/SearchParamAwareStandaloneQueryWrapper.tsx @@ -1,25 +1,46 @@ -import { SxProps, Box } from '@mui/material' +import { useMemo } from 'react' import { useSearchParams } from 'react-router-dom' -import { StandaloneQueryWrapper } from 'synapse-react-client' +import { QueryWrapper, StandaloneQueryWrapper } from 'synapse-react-client' import { StandaloneQueryWrapperProps } from 'synapse-react-client' +import { generateInitQueryRequest } from 'synapse-react-client/components/StandaloneQueryWrapper/StandaloneQueryWrapper' +import { getAdditionalFilters } from 'synapse-react-client/utils/functions' export type SearchParamAwareStandaloneQueryWrapperProps = { - sx: SxProps + isVisible: boolean standaloneQueryWrapperProps: StandaloneQueryWrapperProps } export function SearchParamAwareStandaloneQueryWrapper( props: SearchParamAwareStandaloneQueryWrapperProps, ) { - const { sx, standaloneQueryWrapperProps } = props + const { isVisible, standaloneQueryWrapperProps } = props const [searchParams] = useSearchParams() + const searchParamsRecords = useMemo(() => { + if (searchParams) { + return Object.fromEntries(searchParams.entries()) + } + return undefined + }, [searchParams]) - return ( - + // if is visible, render a StandaloneQueryWrapper. + // if not, just run the query wrapper with the query request derived from the search params (to populate the cache and return the count) + if (isVisible) { + return ( - + ) + } + //else + const { sql } = standaloneQueryWrapperProps + const derivedQueryRequestFromSearchParams = generateInitQueryRequest(sql) + derivedQueryRequestFromSearchParams.query.additionalFilters = + getAdditionalFilters(undefined, searchParamsRecords, undefined) + return ( + ) } diff --git a/packages/synapse-react-client/src/components/StandaloneQueryWrapper/StandaloneQueryWrapper.tsx b/packages/synapse-react-client/src/components/StandaloneQueryWrapper/StandaloneQueryWrapper.tsx index cedbea5ed9..1ea0c9727f 100644 --- a/packages/synapse-react-client/src/components/StandaloneQueryWrapper/StandaloneQueryWrapper.tsx +++ b/packages/synapse-react-client/src/components/StandaloneQueryWrapper/StandaloneQueryWrapper.tsx @@ -63,7 +63,7 @@ export type StandaloneQueryWrapperProps = SynapseTableConfiguration & Operator & StandaloneQueryWrapperOwnProps -const generateInitQueryRequest = (sql: string): QueryBundleRequest => { +export const generateInitQueryRequest = (sql: string): QueryBundleRequest => { return { partMask: SynapseConstants.BUNDLE_MASK_QUERY_FACETS | From 720443592b26e65c7f294ea236e603c6dc9d67c0 Mon Sep 17 00:00:00 2001 From: jay-hodgson Date: Fri, 10 Jan 2025 12:41:56 -0800 Subject: [PATCH 08/12] set shouldDeepLink to false in Portal Search --- .../PortalSearch/SearchParamAwareStandaloneQueryWrapper.tsx | 3 ++- .../StandaloneQueryWrapper/StandaloneQueryWrapper.tsx | 5 +++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/apps/synapse-portal-framework/src/components/PortalSearch/SearchParamAwareStandaloneQueryWrapper.tsx b/apps/synapse-portal-framework/src/components/PortalSearch/SearchParamAwareStandaloneQueryWrapper.tsx index 7c8ac45daf..9fd2152d73 100644 --- a/apps/synapse-portal-framework/src/components/PortalSearch/SearchParamAwareStandaloneQueryWrapper.tsx +++ b/apps/synapse-portal-framework/src/components/PortalSearch/SearchParamAwareStandaloneQueryWrapper.tsx @@ -20,13 +20,13 @@ export function SearchParamAwareStandaloneQueryWrapper( } return undefined }, [searchParams]) - // if is visible, render a StandaloneQueryWrapper. // if not, just run the query wrapper with the query request derived from the search params (to populate the cache and return the count) if (isVisible) { return ( ) @@ -39,6 +39,7 @@ export function SearchParamAwareStandaloneQueryWrapper( return ( ) diff --git a/packages/synapse-react-client/src/components/StandaloneQueryWrapper/StandaloneQueryWrapper.tsx b/packages/synapse-react-client/src/components/StandaloneQueryWrapper/StandaloneQueryWrapper.tsx index 1ea0c9727f..c80559cfff 100644 --- a/packages/synapse-react-client/src/components/StandaloneQueryWrapper/StandaloneQueryWrapper.tsx +++ b/packages/synapse-react-client/src/components/StandaloneQueryWrapper/StandaloneQueryWrapper.tsx @@ -55,6 +55,7 @@ type StandaloneQueryWrapperOwnProps = { | 'fileNameColumnName' | 'fileVersionColumnName' | 'onQueryResultBundleChange' + | 'shouldDeepLink' > & Pick @@ -107,6 +108,7 @@ function StandaloneQueryWrapper(props: StandaloneQueryWrapperProps) { : NoContentPlaceholderType.STATIC, cardConfiguration, tableConfiguration, + shouldDeepLink, ...rest } = props @@ -122,7 +124,6 @@ function StandaloneQueryWrapper(props: StandaloneQueryWrapperProps) { searchParams, sqlOperator, ) - const { data: entity } = useGetEntity(entityId) /** @@ -133,11 +134,11 @@ function StandaloneQueryWrapper(props: StandaloneQueryWrapperProps) { */ const queryWrapperKey = JSON.stringify(derivedQueryRequestFromSearchParams) + componentKey - return ( Date: Fri, 10 Jan 2025 13:25:29 -0800 Subject: [PATCH 09/12] clean import, and add horizontal line below tabs --- .../src/config/routesConfig.tsx | 2 +- .../PortalSearch/PortalSearchTabs.tsx | 147 ++++++++++-------- 2 files changed, 81 insertions(+), 68 deletions(-) diff --git a/apps/portals/cancercomplexity/src/config/routesConfig.tsx b/apps/portals/cancercomplexity/src/config/routesConfig.tsx index 3e086415ec..2b750ccc5f 100644 --- a/apps/portals/cancercomplexity/src/config/routesConfig.tsx +++ b/apps/portals/cancercomplexity/src/config/routesConfig.tsx @@ -22,7 +22,7 @@ import { onIndividualThemeBarPlotPointClick, onPointClick, } from './synapseConfigs/onPointClick' -import { CCKPSearchPage, searchPageChildRoutes } from 'src/pages/CCKPSearchPage' +import { searchPageChildRoutes } from 'src/pages/CCKPSearchPage' const routes: RouteObject[] = [ { diff --git a/apps/synapse-portal-framework/src/components/PortalSearch/PortalSearchTabs.tsx b/apps/synapse-portal-framework/src/components/PortalSearch/PortalSearchTabs.tsx index c4979eb583..8118eb7338 100644 --- a/apps/synapse-portal-framework/src/components/PortalSearch/PortalSearchTabs.tsx +++ b/apps/synapse-portal-framework/src/components/PortalSearch/PortalSearchTabs.tsx @@ -18,72 +18,85 @@ export function PortalSearchTabs(props: PortalSearchTabUIProps) { const isMobileView = useMediaQuery(theme.breakpoints.down('sm')) const navigate = useNavigate() return ( - - {tabConfig.map(({ path, title, count }) => { - const targetPathname = `/Search/${path}` - return ( - - {title}{' '} - {count !== undefined && ( - - )} - - } - onClick={() => - navigate({ - pathname: targetPathname, - search: location.search, - }) - } - sx={{ - transition: 'all 400ms', - fontSize: '16px', - fontWeight: 700, - color: 'grey.700', - minWidth: { xs: '100%', sm: 'unset' }, - py: 1, - px: 0, - borderBottom: '4px solid', - borderBottomColor: 'transparent', - '&.Mui-selected': { - color: 'secondary.main', - borderBottomColor: 'secondary.main', - }, - '&:hover:not(.Mui-selected)': { - color: 'grey.800', - }, - }} - /> - ) - })} - + <> + + {tabConfig.map(({ path, title, count }) => { + const targetPathname = `/Search/${path}` + return ( + + {title}{' '} + {count !== undefined && ( + + )} + + } + onClick={() => + navigate({ + pathname: targetPathname, + search: location.search, + }) + } + sx={{ + transition: 'all 400ms', + fontSize: '16px', + fontWeight: 700, + color: 'grey.700', + minWidth: { xs: '100%', sm: 'unset' }, + py: 1, + px: 0, + borderBottom: '4px solid', + borderBottomColor: 'transparent', + '&.Mui-selected': { + color: 'secondary.main', + borderBottomColor: 'secondary.main', + }, + '&:hover:not(.Mui-selected)': { + color: 'grey.800', + }, + }} + /> + ) + })} + + + ) } From eba91891104ab55403a23cfb0b0059e8a09c64ce Mon Sep 17 00:00:00 2001 From: Jay Hodgson Date: Mon, 13 Jan 2025 09:07:16 -0800 Subject: [PATCH 10/12] Update apps/synapse-portal-framework/src/components/PortalSearch/PortalFullTextSearchField.tsx Co-authored-by: Nick Grosenbacher --- .../src/components/PortalSearch/PortalFullTextSearchField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/synapse-portal-framework/src/components/PortalSearch/PortalFullTextSearchField.tsx b/apps/synapse-portal-framework/src/components/PortalSearch/PortalFullTextSearchField.tsx index a3c5443cf0..fea4fea40c 100644 --- a/apps/synapse-portal-framework/src/components/PortalSearch/PortalFullTextSearchField.tsx +++ b/apps/synapse-portal-framework/src/components/PortalSearch/PortalFullTextSearchField.tsx @@ -31,8 +31,8 @@ export function PortalFullTextSearchField() { ), }} + fullWidth sx={{ - width: '100%', boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)', border: '1px solid', borderColor: 'grey.300', From f79a2494722d5710162d1a1201245aed95870f98 Mon Sep 17 00:00:00 2001 From: jay-hodgson Date: Mon, 13 Jan 2025 09:25:12 -0800 Subject: [PATCH 11/12] revert refactor to QueryWrapperPlotNav --- .../QueryWrapperPlotNav.tsx | 38 ++++++------------- 1 file changed, 12 insertions(+), 26 deletions(-) diff --git a/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx b/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx index 9338c6b501..87b9d15f91 100644 --- a/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx +++ b/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx @@ -273,30 +273,6 @@ function QueryWrapperPlotNavContents(props: QueryWrapperPlotNavContentsProps) { ) } -export const getQueryRequest = ({ - entityId, - query, -}: { - entityId: string - query: Query -}) => { - const request: QueryBundleRequest = { - entityId, - concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest', - partMask: - SynapseConstants.BUNDLE_MASK_QUERY_RESULTS | - SynapseConstants.BUNDLE_MASK_QUERY_COUNT | - SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS | - SynapseConstants.BUNDLE_MASK_QUERY_MAX_ROWS_PER_PAGE | - SynapseConstants.BUNDLE_MASK_QUERY_COLUMN_MODELS | - SynapseConstants.BUNDLE_MASK_QUERY_FACETS | - SynapseConstants.BUNDLE_MASK_SUM_FILES_SIZE_BYTES | - SynapseConstants.BUNDLE_MASK_LAST_UPDATED_ON, - query, - } - return request -} - function QueryWrapperPlotNav(props: QueryWrapperPlotNavProps) { const { searchParams, @@ -336,10 +312,20 @@ function QueryWrapperPlotNav(props: QueryWrapperPlotNavProps) { } const { data: entity } = useGetEntity(entityId, versionNumber) - const initQueryRequest: QueryBundleRequest = getQueryRequest({ + const initQueryRequest: QueryBundleRequest = { entityId, + concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest', + partMask: + SynapseConstants.BUNDLE_MASK_QUERY_RESULTS | + SynapseConstants.BUNDLE_MASK_QUERY_COUNT | + SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS | + SynapseConstants.BUNDLE_MASK_QUERY_MAX_ROWS_PER_PAGE | + SynapseConstants.BUNDLE_MASK_QUERY_COLUMN_MODELS | + SynapseConstants.BUNDLE_MASK_QUERY_FACETS | + SynapseConstants.BUNDLE_MASK_SUM_FILES_SIZE_BYTES | + SynapseConstants.BUNDLE_MASK_LAST_UPDATED_ON, query, - }) + } const isFullTextSearchEnabled = (entity && isTable(entity) && entity.isSearchEnabled) ?? false From 946a7338ad43998683f48abbee1099f22ae56a66 Mon Sep 17 00:00:00 2001 From: jay-hodgson Date: Mon, 13 Jan 2025 09:32:31 -0800 Subject: [PATCH 12/12] add comment --- .../src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx b/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx index 87b9d15f91..cfdd0fbfa0 100644 --- a/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx +++ b/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx @@ -56,6 +56,7 @@ type QueryWrapperPlotNavOwnProps = { isInfinite?: boolean sql: string limit?: number + /** Set to true when you want the query to be saved in the URL search parameters. If you are controlling the view (such as in PortalSearch), you'll want to set this to false */ shouldDeepLink?: boolean /** If onQueryChange is set, the callback will be invoked when the Query changes */ onQueryChange?: (newQueryJson: string) => void