forked from Sage-Bionetworks/synapse-web-monorepo
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request Sage-Bionetworks#378 from nickgros/SWC-6492
- Loading branch information
Showing
29 changed files
with
1,181 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
25 changes: 25 additions & 0 deletions
25
packages/synapse-react-client/src/components/SynapseTable/ExpandCollapseButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import React from 'react' | ||
| import IconSvg from '../IconSvg' | ||
|
|
||
| type ExpandCollapseButtonProps = { | ||
| isExpanded: boolean | ||
| } & React.ButtonHTMLAttributes<HTMLButtonElement> | ||
|
|
||
| export default function ExpandCollapseButton(props: ExpandCollapseButtonProps) { | ||
| const { isExpanded, ...buttonProps } = props | ||
| return ( | ||
| <button {...buttonProps}> | ||
| <IconSvg | ||
| icon={isExpanded ? 'minusBoxOutline' : 'addBoxOutline'} | ||
| sx={{ | ||
| color: 'grey.600', | ||
| height: '16px', | ||
| verticalAlign: 'top', | ||
| '&:hover': { | ||
| color: 'grey.700', | ||
| }, | ||
| }} | ||
| /> | ||
| </button> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 3 additions & 3 deletions
6
...ct-client/src/components/EntityIdList.tsx → ...seTable/SynapseTableCell/EntityIdList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
...t/src/components/EvaluationIdRenderer.tsx → ...SynapseTableCell/EvaluationIdRenderer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 58 additions & 0 deletions
58
...se-react-client/src/components/SynapseTable/SynapseTableCell/JSON/ComplexJSONRenderer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import React, { useState } from 'react' | ||
| import { Box, Typography } from '@mui/material' | ||
| import ExpandCollapseButton from '../../ExpandCollapseButton' | ||
| import { chromeLight, Inspector } from 'react-inspector' | ||
|
|
||
| type ComplexJSONRendererProps = { | ||
| value: any | ||
| } | ||
|
|
||
| /** | ||
| * Handles rendering any complex JSON value in a Synapse table cell. This generally acts as a fallback renderer if the | ||
| * JSON data doesn't have a simple structure handled by a different renderer. | ||
| * @param props | ||
| * @constructor | ||
| */ | ||
| export function ComplexJSONRenderer(props: ComplexJSONRendererProps) { | ||
| const { value } = props | ||
| const [expandAll, setExpandAll] = useState(false) | ||
|
|
||
| // @ts-expect-error - the theme prop type provided by react-inspector is wrong | ||
| const theme: React.ComponentProps<typeof Inspector>['theme'] = { | ||
| ...chromeLight, | ||
| BASE_BACKGROUND_COLOR: 'none', | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <Typography | ||
| variant={'smallText1'} | ||
| sx={{ py: 0.5, color: 'grey.600', fontStyle: 'italic' }} | ||
| > | ||
| {expandAll ? 'Collapse' : 'Expand'} all | ||
| <ExpandCollapseButton | ||
| className="ExpandableTableData__expandButton" | ||
| isExpanded={expandAll} | ||
| onClick={() => setExpandAll(v => !v)} | ||
| /> | ||
| </Typography> | ||
| <Box sx={{ pl: '2px' }}> | ||
| <Inspector | ||
| data={value} | ||
| theme={theme} | ||
| table={false} | ||
| key={ | ||
| // Setting `expandLevel` to 0 doesn't trigger a re-render, so force the rerender by updating the key | ||
| String(expandAll) | ||
| } | ||
| expandLevel={ | ||
| expandAll | ||
| ? // making this number very large actually results in a performance hit, so choose a reasonably small number | ||
| 20 | ||
| : 0 | ||
| } | ||
| /> | ||
| </Box> | ||
| </> | ||
| ) | ||
| } |
55 changes: 55 additions & 0 deletions
55
...apse-react-client/src/components/SynapseTable/SynapseTableCell/JSON/JSONArrayRenderer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { JSONPrimitiveType } from './JSONRendererUtils' | ||
| import React, { useState } from 'react' | ||
| import { Box, Collapse, Typography } from '@mui/material' | ||
| import { JSONPrimitiveRenderer } from './JSONPrimitiveRenderer' | ||
| import ExpandCollapseButton from '../../ExpandCollapseButton' | ||
|
|
||
| type JSONArrayRendererProps = { value: JSONPrimitiveType[] } | ||
|
|
||
| /** | ||
| * Handles rendering a JSON array of "primitive" types in a Synapse table cell. | ||
| * @param props | ||
| * @constructor | ||
| */ | ||
| export function JSONArrayRenderer(props: JSONArrayRendererProps) { | ||
| const { value } = props | ||
| const [expanded, setExpanded] = useState(false) | ||
| const showCollapseText = value.length > 1 | ||
|
|
||
| if (value.length === 0) { | ||
| return ( | ||
| <Typography variant={'smallText1'} className="SRC-inactive"> | ||
| {'Empty array'} | ||
| </Typography> | ||
| ) | ||
| } | ||
| if (value.length === 1) { | ||
| return <JSONPrimitiveRenderer value={value[0]} /> | ||
| } | ||
| return ( | ||
| <> | ||
| {showCollapseText && ( | ||
| <Typography | ||
| variant={'smallText1'} | ||
| sx={{ color: 'grey.600', fontStyle: 'italic', mb: 1 }} | ||
| > | ||
| {`${value.length.toLocaleString()} items`} | ||
| <ExpandCollapseButton | ||
| isExpanded={expanded} | ||
| className="ExpandableTableData__expandButton" | ||
| onClick={() => setExpanded(!expanded)} | ||
| /> | ||
| </Typography> | ||
| )} | ||
| <Collapse in={expanded}> | ||
| {value.map((val: JSONPrimitiveType, index: number) => ( | ||
| <Box display={'flex'} gap={0.5} mb={1} key={index}> | ||
| <Typography variant={'smallText1'}> | ||
| <JSONPrimitiveRenderer value={val} /> | ||
| </Typography> | ||
| </Box> | ||
| ))} | ||
| </Collapse> | ||
| </> | ||
| ) | ||
| } |
91 changes: 91 additions & 0 deletions
91
...pse-react-client/src/components/SynapseTable/SynapseTableCell/JSON/JSONObjectRenderer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import React, { useState } from 'react' | ||
| import { Box, Collapse, Typography } from '@mui/material' | ||
| import ExpandCollapseButton from '../../ExpandCollapseButton' | ||
| import { JSONPrimitiveType } from './JSONRendererUtils' | ||
| import { JSONPrimitiveRenderer } from './JSONPrimitiveRenderer' | ||
|
|
||
| const OBJECT_DEFAULT_NUM_KEYS_TO_SHOW = 3 | ||
| type JSONObjectKeyValuePairProps = { | ||
| keyName: string | ||
| value: JSONPrimitiveType | ||
| } | ||
|
|
||
| function JSONObjectKeyValuePair(props: JSONObjectKeyValuePairProps) { | ||
| const { keyName, value } = props | ||
|
|
||
| return ( | ||
| <Box display={'flex'} mb={1}> | ||
| <Typography variant={'smallText1'}> | ||
| <JSONPrimitiveRenderer value={keyName} /> | ||
| </Typography> | ||
| <Typography | ||
| variant={'smallText1'} | ||
| sx={{ color: 'grey.600', fontStyle: 'italic', px: 0.5 }} | ||
| > | ||
| <JSONPrimitiveRenderer value={value} /> | ||
| </Typography> | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| type JSONObjectRendererProps = { | ||
| value: Record<string, JSONPrimitiveType> | ||
| } | ||
|
|
||
| /** | ||
| * Handles rendering a JSON object where all values are JSON primitives in a Synapse table cell. | ||
| * @param props | ||
| * @constructor | ||
| */ | ||
| export function JSONObjectRenderer(props: JSONObjectRendererProps) { | ||
| const { value } = props | ||
| const numKeys = Object.keys(value).length | ||
| const isCollapsible = numKeys > OBJECT_DEFAULT_NUM_KEYS_TO_SHOW | ||
| const [expanded, setExpanded] = useState(false) | ||
|
|
||
| if (numKeys === 0) { | ||
| return ( | ||
| <Typography variant={'smallText1'} className="SRC-inactive"> | ||
| {'Empty object'} | ||
| </Typography> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| {Object.entries(value) | ||
| // Render the first set of items unconditionally | ||
| .slice(0, OBJECT_DEFAULT_NUM_KEYS_TO_SHOW) | ||
| .map(([key, val]) => ( | ||
| <JSONObjectKeyValuePair key={key} keyName={key} value={val} /> | ||
| ))} | ||
| {/* Render the rest of the items in a Collapse */} | ||
| {isCollapsible && ( | ||
| <> | ||
| <Collapse in={expanded}> | ||
| {Object.entries(value) | ||
| .slice(OBJECT_DEFAULT_NUM_KEYS_TO_SHOW) | ||
| .map(([key, val]) => ( | ||
| <JSONObjectKeyValuePair key={key} keyName={key} value={val} /> | ||
| ))} | ||
| </Collapse> | ||
| <Typography | ||
| variant={'smallText1'} | ||
| sx={{ mb: 0.5, color: 'grey.600', fontStyle: 'italic' }} | ||
| > | ||
| {expanded | ||
| ? '' | ||
| : `${( | ||
| numKeys - OBJECT_DEFAULT_NUM_KEYS_TO_SHOW | ||
| ).toLocaleString()} more`} | ||
| <ExpandCollapseButton | ||
| isExpanded={expanded} | ||
| className="ExpandableTableData__expandButton" | ||
| onClick={() => setExpanded(v => !v)} | ||
| /> | ||
| </Typography> | ||
| </> | ||
| )} | ||
| </> | ||
| ) | ||
| } |
Oops, something went wrong.