Add JSONDataset preview support

RELEASE.md

@@ -9,6 +9,7 @@ Please follow the established format:
 
 ## Bug fixes and other changes
 
+- Add support for `JSONDataset` preview. (#1800)
 - Increase Kedro-Viz timeout. (#1803)
 - Remove demo data source and update feature hints. (#1804)
 

src/components/json-object/json-object.js

@@ -7,7 +7,15 @@ import { darkjsonViewerTheme, lightjsonViewerTheme } from './json-theme';
 /**
  * Shows a metadata object
  */
-const JSONObject = ({ className, value, kind, theme, empty }) => (
+const JSONObject = ({
+  className,
+  value,
+  kind,
+  theme,
+  empty,
+  style,
+  collapsed,
+}) => (
   <div className={modifiers('pipeline-json__object', { kind }, className)}>
     {Object.keys(value).length === 0 ? (
       empty
@@ -16,12 +24,12 @@ const JSONObject = ({ className, value, kind, theme, empty }) => (
         theme={theme === 'dark' ? darkjsonViewerTheme : lightjsonViewerTheme}
         name={false}
         indentWidth={1}
-        collapsed={1}
+        collapsed={collapsed ? collapsed : 1}
         collapseStringsAfterLength={true}
         enableClipboard={true}
         displayDataTypes={false}
         src={value}
-        style={{ backgroundColor: 'transparent' }}
+        style={style ? style : { backgroundColor: 'transparent' }}
       />
     )}
   </div>

src/components/metadata-modal/metadata-modal.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PlotlyChart from '../plotly-chart';
 import PreviewTable from '../preview-table';
+import JSONObject from '../../components/json-object';
 import CollapseIcon from '../icons/collapse';
 import BackIcon from '../icons/back';
 import NodeIcon from '../icons/node-icon';
@@ -10,12 +11,14 @@ import getShortType from '../../utils/short-type';
 import { getClickedNodeMetaData } from '../../selectors/metadata';
 import './metadata-modal.scss';
 
-const MetadataModal = ({ metadata, onToggle, visible }) => {
+const MetadataModal = ({ metadata, onToggle, visible, theme }) => {
   const hasPlot = metadata?.previewType === 'PlotlyPreview';
   const hasImage = metadata?.previewType === 'ImagePreview';
   const hasTable = metadata?.previewType === 'TablePreview';
+  const hasJSON = metadata?.previewType === 'JSONPreview';
+  const hasMetadataContent = hasPlot || hasImage || hasTable || hasJSON;
 
-  if (!visible.metadataModal || (!hasPlot && !hasImage && !hasTable)) {
+  if (!visible.metadataModal || !hasMetadataContent) {
     return null;
   }
 
@@ -52,11 +55,24 @@ const MetadataModal = ({ metadata, onToggle, visible }) => {
         )}
       </div>
       {hasPlot && (
-        <PlotlyChart
-          data={metadata.preview.data}
-          layout={metadata.preview.layout}
-          view="modal"
-        />
+        <>
+          <PlotlyChart
+            data={metadata.preview.data}
+            layout={metadata.preview.layout}
+            view="modal"
+          />
+          <div className="pipeline-metadata-modal__bottom">
+            <button
+              className="pipeline-metadata-modal__collapse-plot"
+              onClick={onCollapsePlotClick}
+            >
+              <CollapseIcon className="pipeline-metadata-modal__collapse-plot-icon"></CollapseIcon>
+              <span className="pipeline-metadata-modal__collapse-plot-text">
+                Collapse Plotly Visualization
+              </span>
+            </button>
+          </div>
+        </>
       )}
       {hasImage && (
         <div className="pipeline-matplotlib-chart">
@@ -74,19 +90,14 @@ const MetadataModal = ({ metadata, onToggle, visible }) => {
           <PreviewTable data={metadata.preview} size="large" />
         </div>
       )}
-      {!hasTable && (
-        <div className="pipeline-metadata-modal__bottom">
-          <button
-            className="pipeline-metadata-modal__collapse-plot"
-            onClick={onCollapsePlotClick}
-          >
-            <CollapseIcon className="pipeline-metadata-modal__collapse-plot-icon"></CollapseIcon>
-            <span className="pipeline-metadata-modal__collapse-plot-text">
-              {hasPlot
-                ? 'Collapse Plotly Visualization'
-                : 'Collapse Matplotlib Image'}
-            </span>
-          </button>
+      {hasJSON && (
+        <div className="pipeline-metadata-modal__preview-json">
+          <JSONObject
+            value={JSON.parse(metadata.preview)}
+            theme={theme}
+            style={{ background: 'transparent', fontSize: '15px' }}
+            collapsed={3}
+          />
         </div>
       )}
     </div>

src/components/metadata-modal/metadata-modal.scss

@@ -96,9 +96,8 @@
   flex-direction: row;
   flex-grow: 0;
   flex-shrink: 0;
-  align-content: center;
+  place-content: center flex-end;
   align-items: center;
-  justify-content: flex-end;
   min-width: 100%;
 }
 
@@ -124,6 +123,13 @@
   margin: 1.5em 0;
 }
 
+.pipeline-metadata-modal__preview-json {
+  width: 60%;
+  overflow-y: auto;
+  padding: 0 1.5em;
+  margin: 1.5em 0;
+}
+
 .pipeline-metadata-modal__collapse-plot-icon {
   width: 1.9em;
   height: 1.9em;

src/components/metadata/metadata.js

@@ -4,6 +4,7 @@ import modifiers from '../../utils/modifiers';
 import NodeIcon from '../../components/icons/node-icon';
 import IconButton from '../../components/ui/icon-button';
 import PreviewTable from '../../components/preview-table';
+import JSONObject from '../../components/json-object';
 import CommandCopier from '../ui/command-copier/command-copier';
 import PlotlyChart from '../plotly-chart';
 import CloseIcon from '../icons/close';
@@ -63,9 +64,11 @@ const MetaData = ({
     hasPreview &&
     (metadata?.previewType === 'MetricsTrackingPreview' ||
       metadata?.previewType === 'JSONTrackingPreview');
-  const hasTable = hasPreview && metadata?.previewType === 'TablePreview';
+  const hasTablePreview =
+    hasPreview && metadata?.previewType === 'TablePreview';
   const isMetricsTrackingDataset =
     hasPreview && metadata?.previewType === 'MetricsTrackingPreview';
+  const hasJSONPreview = hasPreview && metadata?.previewType === 'JSONPreview';
   const hasCode = Boolean(metadata?.code);
   const isTranscoded = Boolean(metadata?.originalType);
   const showCodePanel = visible && visibleCode && hasCode;
@@ -323,7 +326,7 @@ const MetaData = ({
                     </button>
                   )
                 : null}
-              {hasTable && (
+              {hasTablePreview && (
                 <>
                   <div className="pipeline-metadata__preview">
                     <PreviewTable
@@ -345,6 +348,29 @@ const MetaData = ({
                   </button>
                 </>
               )}
+              {hasJSONPreview && (
+                <>
+                  <div className="pipeline-metadata__preview-json">
+                    <JSONObject
+                      value={JSON.parse(metadata.preview)}
+                      theme={theme}
+                      style={{ background: 'transparent', fontSize: '14px' }}
+                      collapsed={3}
+                    />
+                    <div className="pipeline-metadata__preview-shadow-box-right" />
+                    <div className="pipeline-metadata__preview-shadow-box-bottom" />
+                  </div>
+                  <button
+                    className="pipeline-metadata__link"
+                    onClick={onExpandMetaDataClick}
+                  >
+                    <ExpandIcon className="pipeline-metadata__link-icon"></ExpandIcon>
+                    <span className="pipeline-metadata__link-text">
+                      Expand JSON View
+                    </span>
+                  </button>
+                </>
+              )}
             </div>
           </>
         )}

src/components/metadata/styles/metadata.scss

@@ -34,8 +34,7 @@
   width: 100%;
   max-width: variables.$metadata-sidebar-width-open;
   padding: 6px 0 0;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden auto;
   background: var(--color-metadata-bg);
   border-left: 1px solid var(--color-border-line);
   transform: translateX(100%);
@@ -286,6 +285,14 @@ $list-inline-spacing: 0.2em;
   position: relative;
 }
 
+.pipeline-metadata__preview-json {
+  background: var(--color-metadata-preview-bg);
+  height: 300px;
+  overflow: hidden;
+  position: relative;
+  padding: 10px 20px 0;
+}
+
 .pipeline-metadata__preview-shadow-box-right {
   background-image: linear-gradient(
     to right,