Merge branch 'main' into PORTALS-3388

.github/workflows/sonarqube-scan.yml → .github/workflows/sonarqube-scan-push.yml

@@ -1,8 +1,6 @@
 on:
   push:
     branches: [main]
-  pull_request:
-    types: [opened, synchronize, reopened]
 
 name: SonarCloud Code Scan
 jobs:

apps/SageAccountWeb/src/components/AccountSettingsTopBar.tsx

@@ -87,16 +87,17 @@ const AccountSettingsTopBar: React.FC<AccountSettingsTopBarProps> = ({
           id="menu-appbar"
           anchorEl={anchorEl}
           anchorOrigin={{
-            vertical: 'bottom',
+            vertical: 'top',
             horizontal: 'right',
           }}
           keepMounted
           transformOrigin={{
-            vertical: 'bottom',
+            vertical: 'top',
             horizontal: 'right',
           }}
           open={isOpen}
           onClose={handleClose}
+          sx={{ mt: '30px' }}
         >
           {accountSettingsPanelConfig.map((item: any, index: number) => (
             <MenuItem

apps/portals/elportal/src/config/synapseConfigs/computational_tools.ts

@@ -11,7 +11,7 @@ const computationalSchema: GenericCardSchema = {
   title: 'name',
   description: 'summary',
   subTitle: 'softwareType',
-  secondaryLabels: ['contributor', 'program', 'grants', 'documentation'],
+  secondaryLabels: ['contributor', 'project', 'toolType', 'documentation'],
   link: 'url',
 }
 

apps/portals/standards/src/config/resources.ts

@@ -1 +1 @@
-export const dataSql = `SELECT id, study, numberParticipants,reportedOutcome,dataCollectionMethod,deviceType,devicePlatform,deviceLocation,sensorType,diagnosis,digitalAssessmentCategory,digitalAssessmentDetails,dataType,dataSubtype,dataDescriptionLocation, dataAccessInstructions FROM syn21994970.10 where dhPortalIndex = 'TRUE'`
+export const dataSql = `SELECT * FROM syn64960277`

apps/portals/standards/src/config/synapseConfigs/data.ts

@@ -10,18 +10,10 @@ import { dataSql } from '../resources'
 const dataRgbIndex = 0
 export const dataColumnLinks: LabelLinkConfig = [
   {
-    matchColumnName: 'dataDescriptionLocation',
-    isMarkdown: true,
-  },
-  {
-    matchColumnName: 'dataAccessInstructions',
-    isMarkdown: true,
-  },
-  {
-    matchColumnName: 'study',
+    matchColumnName: 'Name',
     isMarkdown: false,
-    baseURL: 'Explore/Collections/DetailsPage',
-    URLColumnName: 'study',
+    baseURL: 'Explore/Standard/DetailsPage',
+    URLColumnName: 'Name',
   },
 ]
 
@@ -30,34 +22,16 @@ export const dataQueryWrapperPlotNavProps: QueryWrapperPlotNavProps = {
   shouldDeepLink: true,
   hideDownload: true,
   sql: dataSql,
-  name: 'Data',
+  name: 'Standards',
   columnAliases,
   tableConfiguration: {
     showDownloadColumn: false,
     columnLinks: dataColumnLinks,
   },
   facetsToPlot: [
-    'study',
-    'reportedOutcome',
-    'dataCollectionMethod',
-    'deviceType',
-    'devicePlatform',
-    'deviceLocation',
-    'diagnosis',
-    'digitalAssessmentCategory',
-    'dataType',
-    'dataSubtype',
+    'Data_Topic',
+    // 'Organizations',
   ],
-  searchConfiguration: {
-    searchable: [
-      'collection',
-      'reportedOutcome',
-      'devicePlatform',
-      'diagnosis',
-      'digitalAssessmentCategory',
-      'digitalAssessmentDetails',
-    ],
-  },
   initialPlotType: 'BAR',
 }
 

apps/portals/standards/src/pages/StandardsDetailsPage.tsx

@@ -8,9 +8,20 @@ import { MarkdownSynapseFromColumnData } from '@sage-bionetworks/synapse-portal-
 import { useGetPortalComponentSearchParams } from '@sage-bionetworks/synapse-portal-framework/utils/UseGetPortalComponentSearchParams'
 import {
   ErrorPage,
+  GenericCardSchema,
+  SynapseConstants,
   SynapseErrorType,
 } from 'synapse-react-client'
 import { dataSql } from '../config/resources'
+import { CardContainerLogic } from 'synapse-react-client'
+
+export const standardsCardSchema: GenericCardSchema = {
+  type: SynapseConstants.GENERIC_CARD,
+  title: 'Name',
+  // subTitle: '',
+  // description: '',
+  secondaryLabels: ['Collections', 'Data_Topic', 'Organizations'],
+}
 
 export const standardDetailsPageContent: DetailsPageContentType = [
   {
@@ -41,42 +52,37 @@ export const standardDetailsPageContent: DetailsPageContentType = [
     title: 'Related Standards',
     element: (
       <DetailsPageContextConsumer columnName={'id'}>
-      {({ value }) => (
-        <>{value}</>
-        // TODO:
-        // <CardContainerLogic
-        //   {...standardCardContainerProps}
-        //   searchParams={{ standardId: value! }}
-        // />
-      )}
-    </DetailsPageContextConsumer>
-
+        {({ value }) => (
+          <>{value}</>
+          // TODO:
+          // <CardContainerLogic
+          //   {...standardCardContainerProps}
+          //   searchParams={{ standardId: value! }}
+          // />
+        )}
+      </DetailsPageContextConsumer>
     ),
   },
 ]
 
 export default function StandardsDetailsPage() {
-  const { study } = useGetPortalComponentSearchParams()
+  const { Name } = useGetPortalComponentSearchParams()
 
-  if (!study) {
+  if (!Name) {
     return <ErrorPage type={SynapseErrorType.NOT_FOUND} gotoPlace={() => {}} />
   }
   return (
     <>
       {/* TODO: header card */}
-      {/* <CardContainerLogic
-        isHeader
-        isAlignToLeftNav
-        {...standardsCardConfiguration}
-        columnAliases={columnAliases}
-        genericCardSchema={{
-          ...standardsSchema,
-          title: 'name',
-          link: 'id',
-        }}
-        sql={studySql}
-        searchParams={{ study }}
-      /> */}
+      <CardContainerLogic
+        sql={dataSql}
+        type={SynapseConstants.GENERIC_CARD}
+        genericCardSchema={standardsCardSchema}
+        secondaryLabelLimit={6}
+        isHeader={true}
+        searchParams={{ Name }}
+      />
+
       <DetailsPage sql={dataSql}>
         <DetailsPageContent content={standardDetailsPageContent} />
       </DetailsPage>

packages/synapse-react-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synapse-react-client",
-  "version": "3.4.4",
+  "version": "3.4.5",
   "private": false,
   "type": "module",
   "main": "./dist/index.cjs",

packages/synapse-react-client/src/components/IconList.tsx

@@ -1,6 +1,8 @@
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import IconSvg, { IconSvgProps } from './IconSvg/IconSvg'
 import { merge } from 'lodash-es'
+import { useQueryContext } from './QueryContext'
+import { UniqueFacetIdentifier } from '../utils'
 
 type IconConfigs = {
   [index: string]: IconSvgProps // if the icon option has the "label" set, it will show tooltip in IconSvg
@@ -29,6 +31,18 @@ function IconList(props: IconListProps) {
   let noMatch: boolean = false
   const css = useTheme ? 'icon-list themed' : 'icon-list'
   const componentCss = useBackground ? `${css} bg-circle` : css
+  const queryContext = useQueryContext()
+  const { addValueToSelectedFacet } = queryContext
+
+  const handleIconClick = useCallback(
+    (dataType: 'string') => {
+      const facet: UniqueFacetIdentifier = {
+        columnName: 'dataType',
+      }
+      addValueToSelectedFacet(facet, dataType)
+    },
+    [addValueToSelectedFacet],
+  )
 
   const mergedIconConfigs: IconConfigs = useMemo(() => {
     const mergedIconConfigs: IconConfigs = {}
@@ -47,7 +61,13 @@ function IconList(props: IconListProps) {
         noMatch = true
         return
       } else {
-        return <IconSvg key={el} {...iconConfig} />
+        return (
+          <IconSvg
+            key={el}
+            {...iconConfig}
+            onClick={() => handleIconClick(el)}
+          />
+        )
       }
     })
   }

packages/synapse-react-client/src/components/IconSvg/IconSvg.tsx

@@ -260,6 +260,7 @@ export type IconName = (typeof IconStrings)[number]
 export type IconSvgProps = {
   icon: IconName
   // If provided, will be shown in tooltip
+  onClick?: () => void
   label?: string
   wrap?: boolean
 } & SvgIconProps
@@ -539,7 +540,7 @@ function IconMapping(props: { icon: string } & SvgIconProps) {
 }
 
 function IconSvg(props: IconSvgProps) {
-  const { icon, label = '', wrap = true, ...svgIconProps } = props
+  const { icon, label = '', onClick, wrap = true, ...svgIconProps } = props
 
   const Wrapper = wrap ? 'span' : Fragment
   const wrapperProps = wrap
@@ -548,6 +549,8 @@ function IconSvg(props: IconSvgProps) {
         className: 'styled-svg-wrapper',
         id: `icon-${icon}`,
         role: 'img',
+        onClick,
+        style: onClick ? { cursor: 'pointer' } : {},
       }
     : {}