Preview dataset

RELEASE.md

@@ -13,6 +13,7 @@ Please follow the established format:
 - Remove metrics plots from metadata panel and add link to the plots on Experiment tracking. (#1268)
 - Link plot and JSON dataset names from experiment tracking to the flowchart. (#1165)
 - Bump minimum version of React from 16.8.6 to 17.0.2. (#1282)
+- Show preview of data in metadata panel. (#1288)
 
 ## Bug fixes and other changes
 

package/kedro_viz/api/rest/responses.py

@@ -1,5 +1,5 @@
 """`kedro_viz.api.rest.responses` defines REST response types."""
-# pylint: disable=missing-class-docstring,too-few-public-methods
+# pylint: disable=missing-class-docstring,too-few-public-methods,invalid-name
 import abc
 from typing import Any, Dict, List, Optional, Union
 
@@ -116,6 +116,7 @@ class DataNodeMetadataAPIResponse(BaseAPIResponse):
     image: Optional[str]
     tracking_data: Optional[Dict]
     run_command: Optional[str]
+    preview: Optional[Dict]
 
     class Config:
         schema_extra = {

package/kedro_viz/models/flowchart.py

@@ -486,6 +486,10 @@ def is_tracking_node(self):
         """Checks if the current node is a tracking data node"""
         return self.is_json_node() or self.is_metric_node()
 
+    def is_preview_node(self):
+        """Checks if the current node has a preview"""
+        return hasattr(self.kedro_obj, "_preview")
+
 
 @dataclass
 class TranscodedDataNode(GraphNode):
@@ -555,6 +559,8 @@ class DataNodeMetadata(GraphNodeMetadata):
     # command to run the pipeline to this data node
     run_command: Optional[str] = field(init=False, default=None)
 
+    preview: Optional[Dict] = field(init=False, default=None)
+
     # TODO: improve this scheme.
     def __post_init__(self, data_node: DataNode):
         self.type = data_node.dataset_type
@@ -571,6 +577,7 @@ def __post_init__(self, data_node: DataNode):
             data_node.is_plot_node()
             or data_node.is_image_node()
             or data_node.is_tracking_node()
+            or data_node.is_preview_node()
         ):
             return
 
@@ -586,6 +593,16 @@ def __post_init__(self, data_node: DataNode):
             self.image = dataset.load()
         elif data_node.is_tracking_node():
             self.tracking_data = dataset.load()
+        elif data_node.is_preview_node():
+            try:
+                self.preview = dataset._preview()  # type: ignore
+            except Exception as exc:  # pylint: disable=broad-except # pragma: no cover
+                logger.warning(
+                    "'%s' could not be previewed. Full exception: %s: %s",
+                    data_node.full_name,
+                    type(exc).__name__,
+                    exc,
+                )
 
 
 @dataclass

package/test_requirements.txt

@@ -8,7 +8,7 @@ flake8~=5.0
 fastapi[all]>=0.73.0, <0.93.0
 isort~=5.11
 matplotlib~=3.5
-mypy~=1.0
+mypy~=0.990
 psutil==5.9.4  # same as Kedro for now
 pylint~=2.16
 pytest~=7.2

package/tests/test_models/test_flowchart.py

@@ -369,6 +369,38 @@ def test_data_node_metadata(self):
         assert data_node_metadata.filepath == "/tmp/dataset.csv"
         assert data_node_metadata.run_command == "kedro run --to-outputs=dataset"
 
+    def test_preview_data_node_metadata(self):
+        mock_preview_data = {
+            "columns": ["id", "company_rating", "company_location"],
+            "index": [0, 1, 2],
+            "data": [
+                [1, "90%", "London"],
+                [2, "80%", "Paris"],
+                [3, "40%", "Milan"],
+            ],
+        }
+
+        preview_data_node = MagicMock()
+
+        preview_data_node.is_plot_node.return_value = False
+        preview_data_node.is_image_node.return_value = False
+        preview_data_node.is_tracking_node.return_value = False
+        preview_data_node.is_preview_node.return_value = True
+        preview_data_node.kedro_obj._preview.return_value = mock_preview_data
+        preview_node_metadata = DataNodeMetadata(data_node=preview_data_node)
+        assert preview_node_metadata.preview == mock_preview_data
+
+    def test_preview_data_node_metadata_not_exist(self):
+        preview_data_node = MagicMock()
+
+        preview_data_node.is_plot_node.return_value = False
+        preview_data_node.is_image_node.return_value = False
+        preview_data_node.is_tracking_node.return_value = False
+        preview_data_node.is_preview_node.return_value = True
+        preview_data_node.kedro_obj._preview.return_value = False
+        preview_node_metadata = DataNodeMetadata(data_node=preview_data_node)
+        assert preview_node_metadata.plot is None
+
     def test_transcoded_data_node_metadata(self):
         dataset = CSVDataSet(filepath="/tmp/dataset.csv")
         transcoded_data_node = GraphNode.create_data_node(
@@ -420,6 +452,7 @@ def test_plotly_data_node_metadata(self):
         plotly_data_node.is_plot_node.return_value = True
         plotly_data_node.is_image_node.return_value = False
         plotly_data_node.is_tracking_node.return_value = False
+        plotly_data_node.is_preview_node.return_value = False
         plotly_data_node.kedro_obj.load.return_value = mock_plot_data
         plotly_node_metadata = DataNodeMetadata(data_node=plotly_data_node)
         assert plotly_node_metadata.plot == mock_plot_data
@@ -430,6 +463,7 @@ def test_plotly_data_node_dataset_not_exist(self):
         plotly_data_node.is_image_node.return_value = False
         plotly_data_node.is_tracking_node.return_value = False
         plotly_data_node.kedro_obj.exists.return_value = False
+        plotly_data_node.is_preview_node.return_value = False
         plotly_node_metadata = DataNodeMetadata(data_node=plotly_data_node)
         assert plotly_node_metadata.plot is None
 
@@ -447,6 +481,7 @@ def test_plotly_json_dataset_node_metadata(self):
         plotly_json_dataset_node.is_plot_node.return_value = True
         plotly_json_dataset_node.is_image_node.return_value = False
         plotly_json_dataset_node.is_tracking_node.return_value = False
+        plotly_json_dataset_node.is_preview_node.return_value = False
         plotly_json_dataset_node.kedro_obj.load.return_value = mock_plot_data
         plotly_node_metadata = DataNodeMetadata(data_node=plotly_json_dataset_node)
         assert plotly_node_metadata.plot == mock_plot_data
@@ -461,6 +496,7 @@ def test_image_data_node_metadata(self):
         image_dataset_node.is_image_node.return_value = True
         image_dataset_node.is_plot_node.return_value = False
         image_dataset_node.is_tracking_node.return_value = False
+        image_dataset_node.is_preview_node.return_value = False
         image_dataset_node.kedro_obj.load.return_value = mock_image_data
         image_node_metadata = DataNodeMetadata(data_node=image_dataset_node)
         assert image_node_metadata.image == mock_image_data
@@ -470,6 +506,7 @@ def test_image_data_node_dataset_not_exist(self):
         image_dataset_node.is_image_node.return_value = True
         image_dataset_node.is_plot_node.return_value = False
         image_dataset_node.kedro_obj.exists.return_value = False
+        image_dataset_node.is_preview_node.return_value = False
         image_node_metadata = DataNodeMetadata(data_node=image_dataset_node)
         assert image_node_metadata.image is None
 
@@ -485,6 +522,7 @@ def test_json_data_node_metadata(self):
         json_data_node.is_image_node.return_value = False
         json_data_node.is_tracking_node.return_value = True
         json_data_node.is_metric_node.return_value = False
+        json_data_node.is_preview_node.return_value = False
         json_data_node.kedro_obj.load.return_value = mock_json_data
         json_node_metadata = DataNodeMetadata(data_node=json_data_node)
         assert json_node_metadata.tracking_data == mock_json_data
@@ -495,6 +533,7 @@ def test_metrics_data_node_metadata_dataset_not_exist(self):
         metrics_data_node.is_plot_node.return_value = False
         metrics_data_node.is_image_node.return_value = False
         metrics_data_node.is_metric_node.return_value = True
+        metrics_data_node.is_preview_node.return_value = False
         metrics_data_node.kedro_obj.exists.return_value = False
         metrics_node_metadata = DataNodeMetadata(data_node=metrics_data_node)
         assert metrics_node_metadata.plot is None
@@ -505,6 +544,7 @@ def test_data_node_metadata_latest_tracking_data_not_exist(self):
         plotly_data_node.is_image_node.return_value = False
         plotly_data_node.is_tracking_node.return_value = False
         plotly_data_node.kedro_obj.exists.return_value = False
+        plotly_data_node.kedro_obj.exists.return_value = False
         plotly_node_metadata = DataNodeMetadata(data_node=plotly_data_node)
         assert plotly_node_metadata.plot is None
 

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PlotlyChart from '../plotly-chart';
+import PreviewTable from '../preview-table';
 import CollapseIcon from '../icons/collapse';
 import BackIcon from '../icons/back';
 import NodeIcon from '../icons/node-icon';
@@ -12,8 +13,9 @@ import './metadata-modal.css';
 const MetadataModal = ({ metadata, onToggle, visible }) => {
   const hasPlot = Boolean(metadata?.plot);
   const hasImage = Boolean(metadata?.image);
+  const hasPreview = Boolean(metadata?.preview);
 
-  if (!visible.metadataModal || (!hasPlot && !hasImage)) {
+  if (!visible.metadataModal || (!hasPlot && !hasImage && !hasPreview)) {
     return null;
   }
 
@@ -25,18 +27,28 @@ const MetadataModal = ({ metadata, onToggle, visible }) => {
 
   return (
     <div className="pipeline-metadata-modal">
-      <div className="pipeline-plot-modal__top">
+      <div className="pipeline-metadata-modal__top">
         <button
-          className="pipeline-plot-modal__back"
+          className="pipeline-metadata-modal__back"
           onClick={onCollapsePlotClick}
         >
-          <BackIcon className="pipeline-plot-modal__back-icon"></BackIcon>
-          <span className="pipeline-plot-modal__back-text">Back</span>
+          <BackIcon className="pipeline-metadata-modal__back-icon"></BackIcon>
+          <span className="pipeline-metadata-modal__back-text">Back</span>
         </button>
-        <div className="pipeline-plot-modal__header">
-          <NodeIcon className="pipeline-plot-modal__icon" icon={nodeTypeIcon} />
-          <span className="pipeline-plot-modal__title">{metadata.name}</span>
+        <div className="pipeline-metadata-modal__header">
+          <NodeIcon
+            className="pipeline-metadata-modal__icon"
+            icon={nodeTypeIcon}
+          />
+          <span className="pipeline-metadata-modal__title">
+            {metadata.name}
+          </span>
         </div>
+        {hasPreview && (
+          <div className="pipeline-metadata-modal__preview-text">
+            Previewing first 40 rows only
+          </div>
+        )}
       </div>
       {hasPlot && (
         <PlotlyChart
@@ -56,19 +68,26 @@ const MetadataModal = ({ metadata, onToggle, visible }) => {
           </div>
         </div>
       )}
-      <div className="pipeline-plot-modal__bottom">
-        <button
-          className="pipeline-plot-modal__collapse-plot"
-          onClick={onCollapsePlotClick}
-        >
-          <CollapseIcon className="pipeline-plot-modal__collapse-plot-icon"></CollapseIcon>
-          <span className="pipeline-plot-modal__collapse-plot-text">
-            {hasPlot
-              ? 'Collapse Plotly Visualization'
-              : 'Collapse Matplotlib Image'}
-          </span>
-        </button>
-      </div>
+      {hasPreview && (
+        <div className="pipeline-metadata-modal__preview">
+          <PreviewTable data={metadata.preview} size="large" />
+        </div>
+      )}
+      {!hasPreview && (
+        <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>
+        </div>
+      )}
     </div>
   );
 };