JSON formatting and highlighting (MarquezProject#1690)

* Adding JSON formatting and special case highlighting. Signed-off-by: Peter Hicks <[email protected]> * Moving to dependencies. Signed-off-by: Peter Hicks <[email protected]> * package-lock.json file updates. Signed-off-by: Peter Hicks <[email protected]> * Using different import for testing. Signed-off-by: Peter Hicks <[email protected]> * Fixing empty case handling. Signed-off-by: Peter Hicks <[email protected]> Co-authored-by: Peter Hicks <[email protected]>
Gaoopeng · Oct 7, 2021 · 02329aa · 02329aa
1 parent be22044
commit 02329aa
Show file tree

Hide file tree

Showing 6 changed files with 218 additions and 14 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -25,6 +25,7 @@
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@material-ui/styles": "^4.11.4",
     "@types/react-router-dom": "^5.1.2",
+    "@types/react-syntax-highlighter": "^13.5.2",
     "@visx/clip-path": "1.7.0",
     "@visx/gradient": "1.7.0",
     "@visx/grid": "1.7.0",
@@ -55,6 +56,7 @@
     "react-helmet": "^6.1.0",
     "react-redux": "^6.0.1",
     "react-router-dom": "^5.1.2",
+    "react-syntax-highlighter": "^15.4.4",
     "react-vis": "^1.11.7",
     "redux": "^4.0.1",
     "redux-logger": "^3.0.6",

diff --git a/web/src/components/core/code/MqJson.tsx b/web/src/components/core/code/MqJson.tsx
@@ -0,0 +1,26 @@
+import { THEME_EXTRA, theme } from '../../../helpers/theme'
+import { alpha } from '@material-ui/core/styles'
+import { ocean } from 'react-syntax-highlighter/dist/cjs/styles/hljs'
+import React from 'react'
+import SyntaxHighlighter from 'react-syntax-highlighter'
+
+interface OwnProps {
+  code: object
+}
+
+const MqJson: React.FC<OwnProps> = ({ code }) => {
+  return (
+    <SyntaxHighlighter
+      language='json'
+      style={ocean}
+      customStyle={{
+        backgroundColor: alpha(theme.palette.common.white, 0.1),
+        borderLeft: `2px dashed ${THEME_EXTRA.typography.subdued}`
+      }}
+    >
+      {JSON.stringify(code, null, '  ')}
+    </SyntaxHighlighter>
+  )
+}
+
+export default MqJson
diff --git a/web/src/components/datasets/DatasetInfo.tsx b/web/src/components/datasets/DatasetInfo.tsx
@@ -1,6 +1,7 @@
 import { Box, Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core'
 import { Field } from '../../types/api'
-import MqCode from '../core/code/MqCode'
+import MqEmpty from '../core/empty/MqEmpty'
+import MqJson from '../core/code/MqJson'
 import MqText from '../core/text/MqText'
 import React, { FunctionComponent } from 'react'
 
@@ -14,6 +15,10 @@ interface DatasetInfoProps {
 const DatasetInfo: FunctionComponent<DatasetInfoProps> = props => {
   const { datasetFields, facets } = props
 
+  if (datasetFields.length === 0) {
+    return <MqEmpty title={'No Fields'} body={'Try adding dataset fields.'} />
+  }
+
   return (
     <Box>
       <Table size='small'>
@@ -47,7 +52,7 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = props => {
           <Box mb={1}>
             <MqText subheading>Facets</MqText>
           </Box>
-          <MqCode code={JSON.stringify(facets, null, '\t')} />
+          <MqJson code={facets} />
         </Box>
       )}
     </Box>