diff --git a/RELEASE.md b/RELEASE.md index 1e14df81fa..89a9f539c3 100644 --- a/RELEASE.md +++ b/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) diff --git a/src/components/json-object/json-object.js b/src/components/json-object/json-object.js index 390e75ee05..a439e5c3a5 100644 --- a/src/components/json-object/json-object.js +++ b/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, +}) => (
{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' }} /> )}
diff --git a/src/components/metadata-modal/metadata-modal.js b/src/components/metadata-modal/metadata-modal.js index ba8bccc09c..b8016d3d8d 100644 --- a/src/components/metadata-modal/metadata-modal.js +++ b/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 }) => { )} {hasPlot && ( - + <> + +
+ +
+ )} {hasImage && (
@@ -74,19 +90,14 @@ const MetadataModal = ({ metadata, onToggle, visible }) => {
)} - {!hasTable && ( -
- + {hasJSON && ( +
+
)}
diff --git a/src/components/metadata-modal/metadata-modal.scss b/src/components/metadata-modal/metadata-modal.scss index 28c2df027f..5f1859590d 100644 --- a/src/components/metadata-modal/metadata-modal.scss +++ b/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; diff --git a/src/components/metadata/metadata.js b/src/components/metadata/metadata.js index d33eadefbf..fc5d80ae40 100644 --- a/src/components/metadata/metadata.js +++ b/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 = ({ ) : null} - {hasTable && ( + {hasTablePreview && ( <>
)} + {hasJSONPreview && ( + <> +
+ +
+
+
+ + + )}
)} diff --git a/src/components/metadata/styles/metadata.scss b/src/components/metadata/styles/metadata.scss index 2a9e4d69fe..897499d441 100644 --- a/src/components/metadata/styles/metadata.scss +++ b/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,