Merge pull request #556 from nickgros/SWC-6548g

apps/SageAccountWeb/package.json

@@ -7,10 +7,10 @@
     "@emotion/core": "^11.0.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.13.7",
-    "@mui/material": "^5.13.7",
-    "@mui/system": "^5.13.7",
-    "@mui/utils": "^5.13.7",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.17",
+    "@mui/system": "^5.14.17",
+    "@mui/utils": "^5.14.17",
     "@react-hookz/web": "^23.1.0",
     "lodash-es": "^4.17.21",
     "plotly.js-basic-dist": "^2.24.3",

apps/portals/package.json

@@ -6,8 +6,8 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.13.7",
-    "@mui/material": "^5.13.7",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.17",
     "@react-hookz/web": "^23.1.0",
     "@sage-bionetworks/react-base-table": "^1.13.4",
     "clone-deep": "^4.0.1",

apps/synapse-oauth-signin/package.json

@@ -6,8 +6,8 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.13.7",
-    "@mui/material": "^5.13.7",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.17",
     "@react-hookz/web": "^23.1.0",
     "@sage-bionetworks/react-base-table": "^1.13.4",
     "history": "^5.3.0",

packages/synapse-react-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synapse-react-client",
-  "version": "3.1.61",
+  "version": "3.1.62",
   "private": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -33,10 +33,10 @@
     "@brainhubeu/react-carousel": "1.19.26",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.13.7",
-    "@mui/material": "^5.13.7",
-    "@mui/system": "^5.13.7",
-    "@mui/utils": "^5.13.7",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.17",
+    "@mui/system": "^5.14.17",
+    "@mui/utils": "^5.14.17",
     "@mui/x-data-grid": "5.17.26",
     "@mui/x-date-pickers": "^5.0.20",
     "@popperjs/core": "^2.11.8",

packages/synapse-react-client/src/components/EntityFinder/Breadcrumbs.tsx

@@ -29,7 +29,7 @@ export const Breadcrumbs: React.FunctionComponent<BreadcrumbsProps> = ({
         </>
       )}
       {items.map((item, index) => (
-        <>
+        <React.Fragment key={index}>
           <button
             className={`BreadcrumbItem ${item.isCurrent ? 'Current' : ''}`}
             key={index}
@@ -43,7 +43,7 @@ export const Breadcrumbs: React.FunctionComponent<BreadcrumbsProps> = ({
             {item.name}
           </button>
           {index !== items.length - 1 && <span>&gt;</span>}
-        </>
+        </React.Fragment>
       ))}
     </div>
   )

packages/synapse-react-client/src/components/QueryVisualizationWrapper/QueryVisualizationWrapper.integration.test.tsx

@@ -281,5 +281,37 @@ describe('QueryVisualizationWrapper', () => {
         )
       })
     })
+
+    test('Returns the faceted jsonSubColumn name if force-display-original-column-names is true', async () => {
+      localStorage.setItem('force-display-original-column-names', 'true')
+      const queryResponseWithJsonSubColumn = cloneDeep(queryResponse)
+      queryResponseWithJsonSubColumn.columnModels = [
+        {
+          columnType: ColumnTypeEnum.JSON,
+          name: 'someJsonColumn',
+          id: '123',
+          jsonSubColumns: [
+            {
+              name: 'Sub column name',
+              columnType: ColumnTypeEnum.STRING,
+              facetType: 'enumeration',
+              jsonPath: '$.someJsonPath',
+            },
+          ],
+        },
+      ]
+      server.use(...getHandlersForTableQuery(queryResponseWithJsonSubColumn))
+
+      render(<TestComponent />, { wrapper: createWrapper() })
+
+      await waitFor(() => {
+        const getColumnDisplayName =
+          onContextReceived.mock.lastCall![0].getColumnDisplayName
+        expect(getColumnDisplayName).toBeDefined()
+        expect(getColumnDisplayName('someJsonColumn', '$.someJsonPath')).toBe(
+          'Sub column name',
+        )
+      })
+    })
   })
 })

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

@@ -174,7 +174,7 @@ export function QueryVisualizationWrapper(
       const forceDisplayOriginalColumnName =
         localStorage.getItem('force-display-original-column-names') === 'true'
 
-      if (!columnName || forceDisplayOriginalColumnName) {
+      if (!columnName || (forceDisplayOriginalColumnName && !jsonPath)) {
         return columnName
       }
       if (columnAliases[columnName]) {

packages/synapse-react-client/src/components/TableColumnSchemaEditor/ColumnModelForm.tsx

@@ -1,5 +1,6 @@
 import {
   Box,
+  Fade,
   FormControl,
   Link,
   MenuItem,
@@ -200,6 +201,9 @@ export default function ColumnModelForm(props: ColumnModelFormProps) {
                 'aria-label': 'Column Type',
               }}
               sx={fieldSx}
+              MenuProps={{
+                TransitionComponent: Fade,
+              }}
               disabled={disabled}
             >
               {allowedColumnTypes.map(value => {
@@ -359,6 +363,9 @@ export default function ColumnModelForm(props: ColumnModelFormProps) {
             label="Facet Type"
             value={columnModel.facetType}
             disabled={disabled || allowedFacetTypes === null}
+            MenuProps={{
+              TransitionComponent: Fade,
+            }}
             onChange={e => {
               dispatch({
                 type: 'setColumnModelValue',

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

@@ -9,7 +9,7 @@ import { useDeepCompareMemoize } from 'use-deep-compare-effect'
 import { SkeletonTable } from '../Skeleton'
 import { convertToEntityType } from '../../utils/functions/EntityTypeUtils'
 import TableColumnSchemaForm, { SubmitHandle } from './TableColumnSchemaForm'
-import { Alert, Button } from '@mui/material'
+import { Alert, Button, Divider } from '@mui/material'
 import { ColumnModelFormData } from './TableColumnSchemaFormReducer'
 import {
   getViewScopeForEntity,
@@ -102,12 +102,12 @@ function _TableColumnSchemaEditor(props: TableColumnSchemaEditorProps) {
           onSubmit(formData)
         }}
       />
+      <Divider />
       {error && (
         <Alert severity={'error'} sx={{ my: 2 }}>
           {error?.message}
         </Alert>
       )}
-
       <Button
         variant="contained"
         color="primary"

packages/synapse-react-client/src/components/TableColumnSchemaEditor/TableColumnSchemaEditorUtils.ts

@@ -266,8 +266,8 @@ export function transformFormDataToColumnModels(
 ): SetOptional<ColumnModel, 'id'>[] {
   return formData.map(
     (formEntry: ColumnModelFormData): SetOptional<ColumnModel, 'id'> => {
-      // Remove the isSelected field because it was only used for the UI.
-      const { isSelected, ...rest } = formEntry
+      // Remove the isSelected and isOriginallyDefaultColumn fields because these were only used for the UI.
+      const { isSelected, isOriginallyDefaultColumn, ...rest } = formEntry
       const columnModel = rest as SetOptional<ColumnModel, 'id'>
       if (columnModel.jsonSubColumns) {
         columnModel.jsonSubColumns = (

packages/synapse-react-client/src/components/TableColumnSchemaEditor/TableColumnSchemaForm.tsx

@@ -27,7 +27,7 @@ import {
   styled,
   Typography,
 } from '@mui/material'
-import { isEqual, times } from 'lodash-es'
+import { isEqual, noop, times } from 'lodash-es'
 import { selectAtom, useAtomCallback } from 'jotai/utils'
 import ColumnModelForm from './ColumnModelForm'
 import AddToList from '../../assets/icons/AddToList'
@@ -40,6 +40,7 @@ import {
 import {
   getAllowedColumnTypes,
   transformColumnModelsToFormData,
+  transformFormDataToColumnModels,
 } from './TableColumnSchemaEditorUtils'
 import {
   useGetAnnotationColumnModels,
@@ -82,6 +83,8 @@ export const HIERARCHY_END_COMPONENT = (
 export type SubmitHandle = {
   // Allow the parent component to trigger a submit of the form, so this may be embedded in an arbitrary modal.
   submit: () => void
+  // Imperative handle to get the data out of the form for SWC compatibility
+  getEditedColumnModels: () => SetOptional<ColumnModel, 'id'>[]
 }
 
 type TableColumnSchemaFormProps = {
@@ -90,8 +93,8 @@ type TableColumnSchemaFormProps = {
   /* If this is an entity view, the ViewScope can be used to determine the default column models and fetch annotation column models */
   viewScope?: ViewScope
   initialData?: ColumnModel[]
-  onSubmit: (formData: ColumnModelFormData[]) => void
-  isSubmitting: boolean
+  onSubmit?: (formData: ColumnModelFormData[]) => void
+  isSubmitting?: boolean
 }
 
 const ColumnHeader: StyledComponent<BoxProps> = styled(Box, {
@@ -104,7 +107,13 @@ const TableColumnSchemaForm = React.forwardRef<
   SubmitHandle,
   TableColumnSchemaFormProps
 >(function TableColumnSchemaForm(props, ref) {
-  const { initialData, entityType, viewScope, onSubmit, isSubmitting } = props
+  const {
+    initialData,
+    entityType,
+    viewScope,
+    onSubmit = noop,
+    isSubmitting = false,
+  } = props
 
   const numColumnModels = useAtomValue(
     useMemo(() => atom(get => get(tableColumnSchemaFormDataAtom).length), []),
@@ -174,6 +183,9 @@ const TableColumnSchemaForm = React.forwardRef<
         submit() {
           onSubmit(readFormData())
         },
+        getEditedColumnModels() {
+          return transformFormDataToColumnModels(readFormData())
+        },
       }
     },
     [onSubmit, readFormData],
@@ -225,7 +237,12 @@ const TableColumnSchemaForm = React.forwardRef<
 
   const addDefaultColumns = useCallback(() => {
     if (defaultColumnModels) {
-      addColumnSet(defaultColumnModels)
+      addColumnSet(
+        defaultColumnModels.map(cm => ({
+          ...cm,
+          id: undefined,
+        })),
+      )
     }
   }, [defaultColumnModels, addColumnSet])
 
@@ -240,8 +257,6 @@ const TableColumnSchemaForm = React.forwardRef<
       component={'form'}
       sx={{
         py: 2.5,
-        borderBottom: '2px solid',
-        borderColor: 'grey.300',
       }}
     >
       <TableColumnSchemaFormActions disabled={isSubmitting} />

packages/synapse-react-client/src/components/TimelinePlot/TimelinePlotSpeciesSelector.test.tsx

@@ -1,7 +1,7 @@
 import { act, render, screen, waitFor } from '@testing-library/react'
 import React from 'react'
 import { createWrapper } from '../../testutils/TestingLibraryUtils'
-import { SynapseClient } from '../../index'
+import SynapseClient from '../../synapse-client'
 import queryResultBundleJson from '../../mocks/query/syn51735464GroupBySpecies'
 import TimelinePlotSpeciesSelector, {
   TimelinePlotSpeciesSelectorProps,
@@ -57,7 +57,7 @@ describe('TimelinePlotSpeciesSelector tests', () => {
     )
     // verify the first row has been selected by default
     expect(setSpecies).toHaveBeenCalledWith('Mus musculus')
-    const dropdown = await screen.findByRole('button')
+    const dropdown = await screen.findByRole('combobox')
     await userEvent.click(dropdown)
     await userEvent.click(await screen.findByText('Saccharomyces'))
     expect(setSpecies).toHaveBeenCalledWith('Saccharomyces')

packages/synapse-react-client/src/umd.index.ts

@@ -69,6 +69,7 @@ import SubscriptionPage from './components/SubscriptionPage'
 import OrientationBanner from './components/OrientationBanner/OrientationBanner'
 import AccessRequirementList from './components/AccessRequirementList/AccessRequirementList'
 import { BackendDestinationEnum } from './utils/functions'
+import TableColumnSchemaForm from './components/TableColumnSchemaEditor/TableColumnSchemaForm'
 
 // Also include scss in the bundle
 import './style/main.scss'
@@ -143,6 +144,7 @@ const SynapseComponents = {
   SubscriptionPage,
   OrientationBanner,
   AccessRequirementList,
+  TableColumnSchemaForm,
 }
 
 // Include the version in the build

packages/synapse-react-client/test/containers/markdown/__snapshots__/MarkdownSynapse.integration.test.tsx.snap

@@ -51,7 +51,7 @@ exports[`MarkdownSynapse tests Snapshot tests works with header and a link 1`] =
       >
         header 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-e43ad7-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-jgibl5-MuiTypography-root-MuiLink-root"
           href="https://synapse.org"
           target="_blank"
         >