#396 - Larger JSON results perform poorly (#428)

package.json

@@ -41,7 +41,7 @@
     "react-dom": "^17.0.2",
     "react-fast-compare": "^3.2.0",
     "react-hook-form": "^7.43.9",
-    "react-json-view": "^1.21.3",
+    "react-json-view-lite": "^0.9.6",
     "react-router-dom": "^6.2.2",
     "react-scripts": "^5.0.1",
     "react-table": "^7.8.0",

src/components/JsonCard.test.tsx

@@ -38,7 +38,7 @@ describe('JSON Card', () => {
       </HashRouter>,
     )
     expect(screen.getByText(`"${testObject.value}"`)).toBeInTheDocument()
-    expect(screen.getByText(Object.keys(testObject)[1])).toBeInTheDocument()
+    expect(screen.getByText(`${Object.keys(testObject)[1]}:`)).toBeInTheDocument()
     expect(screen.queryByRole('progressbar')).not.toBeInTheDocument()
   })
 

src/components/JsonCard.tsx

@@ -1,3 +1,5 @@
+import 'css/CustomJsonViewIndex.css'
+
 import { ExpandLess, ExpandMore } from '@mui/icons-material'
 import {
   Card,
@@ -7,11 +9,9 @@ import {
   IconButton,
   Typography,
 } from '@mui/material'
-import { useTheme } from '@mui/material/styles'
 import { ThemeContext } from 'components/UI/Theme/ThemeProvider'
 import { useContext } from 'react'
-import ReactJson from 'react-json-view'
-import { darkTheme, lightTheme } from 'utils/customRJVThemes'
+import { darkStyles, defaultStyles, JsonView } from 'react-json-view-lite'
 
 interface IJsonCard {
   title: string
@@ -30,8 +30,10 @@ interface IJsonCard {
  */
 const JsonCard = ({ title, collapseHandler, data, iconTrigger }: IJsonCard) => {
   const theme = useContext(ThemeContext).theme
-  const colors = useTheme()
-  const bgColor = colors.palette.background.default
+  darkStyles.punctuation = '_puncuationMargin'
+  defaultStyles.punctuation = '_puncuationMargin'
+
+  const shouldInitiallyExpand = (new TextEncoder().encode(JSON.stringify(data)).length) < 7e5
 
   return (
     <Card sx={{ width: 1 }}>
@@ -56,12 +58,12 @@ const JsonCard = ({ title, collapseHandler, data, iconTrigger }: IJsonCard) => {
           </Typography>
         )}
       </CardActions>
-      <CardContent>
+      <CardContent sx={{maxHeight: '700px', overflowY: 'auto' }} >
         {data ? (
-          <ReactJson
-            src={data}
-            theme={theme === 'dark' ? darkTheme(bgColor) : lightTheme(bgColor)}
-            style={{ backgroundColor: 'primary' }}
+          <JsonView
+            data={data}
+            shouldInitiallyExpand={(level) => shouldInitiallyExpand}
+            style={theme === 'dark' ? darkStyles : defaultStyles}
           />
         ) : (
           <CircularProgress aria-label="JSON data loading" />

src/css/CustomJsonViewIndex.css

@@ -0,0 +1,110 @@
+
+._GzYRV {
+    line-height: 1.2;
+    white-space: pre-wrap;
+    white-space: -moz-pre-wrap;
+    white-space: -pre-wrap;
+    white-space: -o-pre-wrap;
+    word-wrap: break-word;
+  }
+
+  ._puncuationMargin {
+    font-weight: bold;
+  }
+
+  ._3eOF8 {
+    margin-left: 5px;
+    font-weight: bold;
+  }
+
+  ._f10Tu {
+    font-size: 1.2em;
+    margin-left: -10px;
+    margin-right: 5px;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }
+
+  ._1MFti {
+    cursor: pointer;
+  }
+
+  ._2bkNM {
+    margin: 0 10px;
+    padding: 0;
+  }
+
+  ._1MGIk {
+    font-weight: 600;
+    margin-right: 5px;
+  }
+
+  ._2T6PJ {
+    color: rgb(39, 124, 124);
+  }
+
+  ._1Gho6 {
+    color: #df113a;
+  }
+
+  ._vGjyY {
+    color: rgb(154, 100, 69);
+  }
+
+  ._1bQdo {
+    color: rgb(68, 125, 68);
+  }
+
+  ._3zQKs {
+    color: rgb(122, 104, 154);
+  }
+
+  ._1xvuR {
+    color: #43413d;
+  }
+
+  ._3cpys {
+    font-size: 1.2em;
+    color: rgb(138 183 230);
+  }
+
+  ._16FAf {
+    font-size: 1.2em;
+    color: rgb(0 100 186);
+  }
+
+  ._2bSDX {
+    font-weight: bolder;
+    margin-right: 5px;
+    margin-left: 10px;
+  }
+
+  ._gsbQL {
+    color: rgb(253, 246, 227);
+  }
+
+  ._LaAZe {
+    color: rgb(62, 204, 204);
+  }
+
+  ._GTKgm {
+    color: rgb(129, 181, 172);
+  }
+
+  ._Chy1W {
+    color: rgb(255, 165, 114);
+  }
+
+  ._2bveF {
+    color: rgb(113, 207, 113);
+  }
+
+  ._2vRm- {
+    color: rgb(202, 172, 255);
+  }
+
+  ._1prJR {
+    color: rgb(38, 139, 210);
+  }
+

src/pages/RequestView/RequestViewOutput.tsx

@@ -12,7 +12,7 @@ import {
   Switch,
   Typography,
 } from '@mui/material'
-import { SupportedColorScheme, useTheme } from '@mui/material/styles'
+import { SupportedColorScheme } from '@mui/material/styles'
 import { useMountedState } from 'hooks/useMountedState'
 import { outputFormatted } from 'pages/RequestView/requestViewHelpers'
 import { Request } from 'types/backend-types'
@@ -33,8 +33,6 @@ const RequestViewOutput = ({
   theme,
 }: RequestViewOutputProps) => {
   const [showAsRawData, setShowAsRawData] = useMountedState<boolean>(false)
-  const colors = useTheme()
-  const bgColor = colors.palette.background.default
   const downloadUrl = window.URL.createObjectURL(
     new Blob([request?.output || '']),
   )
@@ -93,8 +91,8 @@ const RequestViewOutput = ({
           </IconButton>
         </Typography>
       </CardActions>
-      <CardContent>
-        {outputFormatted(request, theme, bgColor, showAsRawData)}
+      <CardContent sx={{maxHeight: '700px', overflowY: 'auto' }} >
+        {outputFormatted(request, theme, showAsRawData)}
       </CardContent>
     </Card>
   )

src/pages/RequestView/requestViewHelpers.tsx

@@ -1,15 +1,15 @@
+import 'css/CustomJsonViewIndex.css'
+
 import NavigateNextIcon from '@mui/icons-material/NavigateNext'
 import { Breadcrumbs, CircularProgress } from '@mui/material'
 import { SupportedColorScheme } from '@mui/material/styles'
-import ReactJson from 'react-json-view'
+import { darkStyles, defaultStyles, JsonView } from 'react-json-view-lite'
 import { Link as RouterLink } from 'react-router-dom'
 import { Request } from 'types/backend-types'
-import { darkTheme, lightTheme } from 'utils/customRJVThemes'
 
 const outputFormatted = (
   request: Request,
   theme: SupportedColorScheme,
-  bgColor: string,
   showAsRawData = false,
 ) => {
   if (['SUCCESS', 'CANCELED', 'ERROR'].includes(request.status)) {
@@ -38,11 +38,16 @@ const outputFormatted = (
         </pre>
       )
     } else if (output_type === 'JSON') {
+      darkStyles.punctuation = '_puncuationMargin'
+      defaultStyles.punctuation = '_puncuationMargin'
+
+      const shouldInitiallyExpand = (new TextEncoder().encode(output).length) < 7e5
+
       return (
-        <ReactJson
-          src={JSON.parse(output)}
-          theme={theme === 'dark' ? darkTheme(bgColor) : lightTheme(bgColor)}
-          style={{ backgroundColor: 'primary' }}
+        <JsonView
+          data={JSON.parse(output)}
+          shouldInitiallyExpand={(level) => shouldInitiallyExpand}
+          style={theme === 'dark' ? darkStyles : defaultStyles}
         />
       )
     } else if (output_type === 'HTML') {

src/setupTests.ts

@@ -4,3 +4,7 @@
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom'
 import './test/axios-mock'
+
+import { TextEncoder } from 'util';
+
+global.TextEncoder = TextEncoder;