From 8fdaba2ecd75911f7d55a95356bf357de0bffb1e Mon Sep 17 00:00:00 2001 From: Tynan DeBold Date: Fri, 19 Aug 2022 09:26:16 -0400 Subject: [PATCH] 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 * Update metadata.test.js Signed-off-by: Tynan DeBold * Remove trailing slash in file path Signed-off-by: Tynan DeBold * Update metadata.test.js Signed-off-by: Tynan DeBold * Update release notes Signed-off-by: Tynan DeBold Signed-off-by: Tynan DeBold --- RELEASE.md | 1 + src/components/metadata/metadata-row.js | 7 +++-- src/components/metadata/metadata-value.js | 9 ++++--- src/components/metadata/metadata.js | 19 +++++++++----- src/components/metadata/metadata.test.js | 32 ++--------------------- 5 files changed, 25 insertions(+), 43 deletions(-) diff --git a/RELEASE.md b/RELEASE.md index fdaec728..0b6c8e67 100644 --- 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 index 91bf8fcc..9a89908f 100644 --- 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 && ( )} {showObject && ( diff --git a/src/components/metadata/metadata-value.js b/src/components/metadata/metadata-value.js index a036cfa7..6dc1e7a5 100644 --- 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, }) => ( <> {!value && value !== 0 ? empty : value} diff --git a/src/components/metadata/metadata.js b/src/components/metadata/metadata.js index 3ba8cd8e..8f28e575 100644 --- 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 ( <> @@ -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 = ({ {hasTrackingData && ( - diff --git a/src/components/metadata/metadata.test.js b/src/components/metadata/metadata.test.js index 80407afb..d1ea5183 100644 --- 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', () => {