Feature/cleanup metadata panel (#1015)

* Remove pipeline field; show only last part of dataset type; working on removing trailing slash for file path Signed-off-by: Tynan DeBold <[email protected]> * Update metadata.test.js Signed-off-by: Tynan DeBold <[email protected]> * Remove trailing slash in file path Signed-off-by: Tynan DeBold <[email protected]> * Update metadata.test.js Signed-off-by: Tynan DeBold <[email protected]> * Update release notes Signed-off-by: Tynan DeBold <[email protected]> Signed-off-by: Tynan DeBold <[email protected]>
taytaybear · Aug 19, 2022 · 8fdaba2 · 8fdaba2
1 parent 9ced044
commit 8fdaba2
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 43 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -13,6 +13,7 @@ Please follow the established format:
 - Don't reset the zoom each time a node is selected. (#988)
 - Improve the way runs animate in and out in experiment tracking. (#993)
 - Fix for plots not showing on Metadata panel. (#1014)
+- Enhance the display of information in the Metadata sidebar. (#1015)
 
 # Release 5.0.0
 

diff --git a/src/components/metadata/metadata-row.js b/src/components/metadata/metadata-row.js
@@ -18,10 +18,12 @@ const MetaDataRow = ({
   inline = true,
   commas = true,
   limit = false,
+  title = null,
   children,
 }) => {
   const showList = Array.isArray(value);
   const showObject = typeof value === 'object' && value !== null && !showList;
+
   return (
     visible && (
       <>
@@ -40,10 +42,11 @@ const MetaDataRow = ({
           )}
           {!showList && !showObject && !children && (
             <MetaDataValue
-              value={value}
-              kind={kind}
               empty={empty}
+              kind={kind}
               theme={theme}
+              title={title || value}
+              value={value}
             />
           )}
           {showObject && (

diff --git a/src/components/metadata/metadata-value.js b/src/components/metadata/metadata-value.js
@@ -6,15 +6,16 @@ import './styles/metadata.css';
  * Shows a metadata value
  */
 const MetaDataValue = ({
-  container: Container = 'span',
   className,
-  value,
-  kind,
+  container: Container = 'span',
   empty,
+  kind,
+  title,
+  value,
 }) => (
   <>
     <Container
-      title={value}
+      title={title}
       className={modifiers('pipeline-metadata__value', { kind }, className)}
     >
       {!value && value !== 0 ? empty : value}

diff --git a/src/components/metadata/metadata.js b/src/components/metadata/metadata.js
@@ -79,6 +79,15 @@ const MetaData = ({
     onToggleMetadataModal(true);
   };
 
+  // Since we style the path right-to-left, remove the initial slash
+  const removeInitialSlash = (string) => {
+    return string?.replace(/^\//g, '');
+  };
+
+  const shortenDatasetType = (string) => {
+    return string?.split('.').pop();
+  };
+
   return (
     <>
       <MetaDataCode visible={showCodePanel} value={metadata?.code} />
@@ -125,7 +134,8 @@ const MetaData = ({
                     label="Dataset Type:"
                     visible={isDataNode}
                     kind="type"
-                    value={metadata.datasetType}
+                    title={metadata.datasetType}
+                    value={shortenDatasetType(metadata.datasetType)}
                   />
                 )}
                 {isTranscoded && (
@@ -147,7 +157,7 @@ const MetaData = ({
                 <MetaDataRow
                   label="File Path:"
                   kind="path"
-                  value={metadata.filepath}
+                  value={removeInitialSlash(metadata.filepath)}
                 />
                 {hasTrackingData && (
                   <MetaDataRow
@@ -186,11 +196,6 @@ const MetaData = ({
                   commas={false}
                   value={metadata.tags}
                 />
-                <MetaDataRow
-                  label="Pipeline:"
-                  visible={Boolean(metadata.pipeline)}
-                  value={metadata.pipeline}
-                />
                 <MetaDataRow label="Run Command:" visible={Boolean(runCommand)}>
                   <CommandCopier command={runCommand} />
                 </MetaDataRow>

diff --git a/src/components/metadata/metadata.test.js b/src/components/metadata/metadata.test.js
@@ -212,14 +212,6 @@ describe('MetaData', () => {
       expect(textOf(rowValue(row))).toEqual(['Split']);
     });
 
-    it('shows the node pipeline', () => {
-      const wrapper = mount({
-        nodeId: splitDataTaskNodeId,
-        mockMetadata: nodeTask,
-      });
-      const row = rowByLabel(wrapper, 'Pipeline:');
-      expect(textOf(rowValue(row))).toEqual(['Default']);
-    });
     describe('when there is no runCommand returned by the backend', () => {
       it('should show a help message asking user to provide a name property', () => {
         const mockMetadata = { ...nodeTask };
@@ -303,9 +295,7 @@ describe('MetaData', () => {
         mockMetadata: nodeData,
       });
       const row = rowByLabel(wrapper, 'Dataset Type:');
-      expect(textOf(rowValue(row))).toEqual([
-        'kedro.extras.datasets.pandas.csv_dataset.CSVDataSet',
-      ]);
+      expect(textOf(rowValue(row))).toEqual(['CSVDataSet']);
     });
 
     it('shows the node filepath', () => {
@@ -315,7 +305,7 @@ describe('MetaData', () => {
       });
       const row = rowByLabel(wrapper, 'File Path:');
       expect(textOf(rowValue(row))).toEqual([
-        '/tmp/project/data/03_primary/model_input_table.csv',
+        'tmp/project/data/03_primary/model_input_table.csv',
       ]);
     });
 
@@ -328,15 +318,6 @@ describe('MetaData', () => {
       expect(textOf(rowValue(row))).toEqual(['Features', 'Split']);
     });
 
-    it('shows the node pipeline', () => {
-      const wrapper = mount({
-        nodeId: modelInputDataSetNodeId,
-        mockMetadata: nodeData,
-      });
-      const row = rowByLabel(wrapper, 'Pipeline:');
-      expect(textOf(rowValue(row))).toEqual(['Default']);
-    });
-
     describe('when there is a runCommand returned by the backend', () => {
       it('shows the node run command', () => {
         const wrapper = mount({
@@ -514,15 +495,6 @@ describe('MetaData', () => {
       const row = rowByLabel(wrapper, 'Tags:');
       expect(textOf(rowValue(row))).toEqual(['Split']);
     });
-
-    it('shows the node pipeline', () => {
-      const wrapper = mount({
-        nodeId: parametersNodeId,
-        mockMetadata: nodeParameters,
-      });
-      const row = rowByLabel(wrapper, 'Pipeline:');
-      expect(textOf(rowValue(row))).toEqual(['Default']);
-    });
   });
 
   describe('mapDispatchToProps', () => {