json cell data view

packages/web/src/celldata/CellDataView.js

@@ -2,7 +2,8 @@ import React from 'react';
 import { SelectField } from '../utility/inputs';
 import ErrorInfo from '../widgets/ErrorInfo';
 import styled from 'styled-components';
-import TextCellView from './TextCellView';
+import { TextCellViewWrap, TextCellViewNoWrap } from './TextCellView';
+import JsonCellView from './JsonCellDataView';
 
 const Toolbar = styled.div`
   display: flex;
@@ -22,10 +23,22 @@ const DataWrapper = styled.div`
 `;
 
 const formats = [
+  {
+    type: 'textWrap',
+    title: 'Text (wrap)',
+    Component: TextCellViewWrap,
+    single: true,
+  },
   {
     type: 'text',
-    title: 'Text',
-    Component: TextCellView,
+    title: 'Text (no wrap)',
+    Component: TextCellViewNoWrap,
+    single: true,
+  },
+  {
+    type: 'json',
+    title: 'Json',
+    Component: JsonCellView,
     single: true,
   },
 ];
@@ -46,7 +59,7 @@ export default function CellDataView({ selection, grider }) {
         Format:
         <SelectField
           value={selectedFormat && selectedFormat.type}
-          onChange={(value) => setSelectedFormat(formats.find((x) => x.type == value))}
+          onChange={(e) => setSelectedFormat(formats.find((x) => x.type == e.target.value))}
         >
           {formats.map((fmt) => (
             <option value={fmt.type} key={fmt.type}>

packages/web/src/celldata/JsonCellDataView.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+import ReactJson from 'react-json-view';
+import ErrorInfo from '../widgets/ErrorInfo';
+
+const OuterWrapper = styled.div`
+  flex: 1;
+  position: relative;
+`;
+
+const InnerWrapper = styled.div`
+  overflow: scroll;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+`;
+
+export default function JsonCellView({ value }) {
+  try {
+    const json = JSON.parse(value);
+    return (
+      <OuterWrapper>
+        <InnerWrapper>
+          <ReactJson src={json} />
+        </InnerWrapper>
+      </OuterWrapper>
+    );
+  } catch (err) {
+    return <ErrorInfo message="Error parsing JSON" />;
+  }
+}

packages/web/src/celldata/TextCellView.js

@@ -5,7 +5,11 @@ const StyledInput = styled.textarea`
   flex: 1;
 `;
 
-export default function TextCellView({ value, grider, selection }) {
+export function TextCellViewWrap({ value, grider, selection }) {
+  return <StyledInput value={value} wrap="hard" readOnly />;
+}
+
+export function TextCellViewNoWrap({ value, grider, selection }) {
   return (
     <StyledInput
       value={value}