Make json tree work again

ibutsu · Apr 22, 2024 · 2da1296 · 2da1296
1 parent 29dafb7
commit 2da1296
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 10 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -33,7 +33,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-heatmap-grid": "^0.9.0",
-    "react-json-view-lite": "^1.3.0",
+    "react-json-tree": "^0.19.0",
     "react-linkify": "^1.0.0-alpha",
     "react-password-strength-bar": "^0.4.1",
     "react-router-dom": "^6.22.3",

diff --git a/frontend/src/components/result.js b/frontend/src/components/result.js
@@ -19,7 +19,7 @@ import {
 import { FileAltIcon, FileImageIcon, InfoCircleIcon, CodeIcon, SearchIcon } from '@patternfly/react-icons';
 import { Link } from 'react-router-dom';
 import Linkify from 'react-linkify';
-import { JsonView } from 'react-json-view-lite';
+import { JSONTree } from 'react-json-tree';
 // import Editor from '@monaco-editor/react';
 
 import { HttpClient } from '../services/http';
@@ -231,7 +231,8 @@ export class ResultView extends React.Component {
 
   render() {
     let { testResult, artifactTabs, activeTab, testHistoryTable } = this.state;
-    const jsonViewTheme = getTheme() === 'dark' ? 'tomorrow' : 'rjv-default';
+    const jsonViewLightThemeOn = getTheme() === 'dark' ? false : true ;
+    console.log(jsonViewTheme)
     if (activeTab === null) {
       activeTab = this.getDefaultTab();
     }
@@ -245,6 +246,26 @@ export class ResultView extends React.Component {
       parameters = Object.keys(testResult.params).map((key) => <div key={key}>{key} = {testResult.params[key]}</div>);
       runLink = <Link to={`/runs/${testResult.run_id}`}>{testResult.run_id}</Link>;
     }
+    const jsonViewTheme = {
+      scheme: 'monokai',
+      author: 'wimer hazenberg (http://www.monokai.nl)',
+      base00: '#272822',
+      base01: '#383830',
+      base02: '#49483e',
+      base03: '#75715e',
+      base04: '#a59f85',
+      base05: '#f8f8f2',
+      base06: '#f5f4f1',
+      base07: '#f9f8f5',
+      base08: '#f92672',
+      base09: '#fd971f',
+      base0A: '#f4bf75',
+      base0B: '#a6e22e',
+      base0C: '#a1efe4',
+      base0D: '#66d9ef',
+      base0E: '#ae81ff',
+      base0F: '#cc6633',
+    };
     return (
       <React.Fragment>
         {this.state.testResult &&
@@ -527,8 +548,7 @@ export class ResultView extends React.Component {
           <Tab eventKey="test-object" title={<TabTitle icon={CodeIcon} text="Test Object" />}>
             <Card>
               <CardBody>
-                {/* <JsonView data={testResult} shouldExpandNode={allExpanded} style={defaultStyles} /> */}
-                <JsonView src={testResult} name={null} iconStyle={"triangle"} collapseStringsAfterLength={120} enableClipboard={false} displayDataTypes={false} theme={jsonViewTheme} />
+                <JSONTree data={run} theme={jsonViewTheme} invertTheme={jsonViewLightThemeOn} hideRoot shouldExpandNodeInitially={() => true}/>
               </CardBody>
             </Card>
           </Tab>

diff --git a/frontend/src/run.js b/frontend/src/run.js
@@ -48,7 +48,7 @@ import {
 } from '@patternfly/react-icons';
 
 import { Link } from 'react-router-dom';
-import { JsonView } from 'react-json-view-lite';
+import { JSONTree } from 'react-json-tree';
 import Editor from '@monaco-editor/react';
 
 import { HttpClient } from './services/http';
@@ -441,7 +441,27 @@ export class Run extends React.Component {
     let created = 0;
     let calculatePasses = true;
     const { run, columns, rows, classificationTable, artifactTabs } = this.state;
-    const jsonViewTheme = getTheme() === 'dark' ? 'tomorrow' : 'rjv-default';
+    const jsonViewLightThemeOn = getTheme() === 'dark' ? false : true ;
+    const jsonViewTheme = {
+      scheme: 'monokai',
+      author: 'wimer hazenberg (http://www.monokai.nl)',
+      base00: '#272822',
+      base01: '#383830',
+      base02: '#49483e',
+      base03: '#75715e',
+      base04: '#a59f85',
+      base05: '#f8f8f2',
+      base06: '#f5f4f1',
+      base07: '#f9f8f5',
+      base08: '#f92672',
+      base09: '#fd971f',
+      base0A: '#f4bf75',
+      base0B: '#a6e22e',
+      base0C: '#a1efe4',
+      base0D: '#66d9ef',
+      base0E: '#ae81ff',
+      base0F: '#cc6633',
+    };
 
     if (run.start_time) {
       created = new Date(run.start_time);
@@ -778,7 +798,7 @@ export class Run extends React.Component {
               <Tab eventKey={'run-object'} title={<TabTitle icon={CodeIcon} text="Run Object" />}>
                 <Card>
                   <CardBody>
-                    <JsonView src={run} name={null} iconStyle={"triangle"} collapseStringsAfterLength={120} enableClipboard={false} displayDataTypes={false} theme={jsonViewTheme} />
+                    <JSONTree data={run} theme={jsonViewTheme} invertTheme={jsonViewLightThemeOn} hideRoot shouldExpandNodeInitially={() => true}/>
                   </CardBody>
                 </Card>
               </Tab>

diff --git a/frontend/src/views/accessibilityanalysis.js b/frontend/src/views/accessibilityanalysis.js
@@ -29,7 +29,7 @@ import {
 import { Link } from 'react-router-dom';
 import { HttpClient } from '../services/http';
 import { Settings } from '../settings';
-import { JsonView } from 'react-json-view-lite';
+import { JSONTree } from 'react-json-tree';
 // import Editor from '@monaco-editor/react';
 import {
   getActiveProject,
@@ -401,6 +401,26 @@ export class AccessibilityAnalysisView extends React.Component {
       page: this.state.page,
       totalItems: this.state.totalItems
     }
+    const jsonViewTheme = {
+      scheme: 'monokai',
+      author: 'wimer hazenberg (http://www.monokai.nl)',
+      base00: '#272822',
+      base01: '#383830',
+      base02: '#49483e',
+      base03: '#75715e',
+      base04: '#a59f85',
+      base05: '#f8f8f2',
+      base06: '#f5f4f1',
+      base07: '#f9f8f5',
+      base08: '#f92672',
+      base09: '#fd971f',
+      base0A: '#f4bf75',
+      base0B: '#a6e22e',
+      base0C: '#a1efe4',
+      base0D: '#66d9ef',
+      base0E: '#ae81ff',
+      base0F: '#cc6633',
+    };
     return (
       <React.Fragment>
         <PageSection>
@@ -481,7 +501,7 @@ export class AccessibilityAnalysisView extends React.Component {
             <Tab eventKey={'run-object'} title={<TabTitle icon={CodeIcon} text="Run Object" />} style={{backgroundColor: "white"}}>
               <Card>
                 <CardBody>
-                  <JsonView src={run} name={null} iconStyle={"triangle"} collapseStringsAfterLength={120} enableClipboard={false} displayDataTypes={false} />
+                  <JSONTree data={run} theme={jsonViewTheme} invertTheme hideRoot shouldExpandNodeInitially={() => true}/>
                 </CardBody>
               </Card>
             </Tab>