+
-
+ {hasPlot && (
+
+ )}
+ {hasImage && (
+
+
+
+
+
+ )}
@@ -65,4 +85,4 @@ export const mapDispatchToProps = (dispatch) => ({
},
});
-export default connect(mapStateToProps, mapDispatchToProps)(PlotlyModal);
+export default connect(mapStateToProps, mapDispatchToProps)(MetadataModal);
diff --git a/src/components/plotly-modal/plotly-modal.scss b/src/components/metadata-modal/metadata-modal.scss
similarity index 95%
rename from src/components/plotly-modal/plotly-modal.scss
rename to src/components/metadata-modal/metadata-modal.scss
index b3514b577a..3a7dd69274 100644
--- a/src/components/plotly-modal/plotly-modal.scss
+++ b/src/components/metadata-modal/metadata-modal.scss
@@ -15,7 +15,7 @@
--color-button-text: #{$color-light};
}
-.pipeline-plotly-modal {
+.pipeline-metadata-modal {
position: absolute;
top: 0;
right: 0;
@@ -30,7 +30,8 @@
height: 100%; /* Full height (cover the whole page) */
background-color: var(--color-bg-plot);
- .pipeline-plotly-chart {
+ .pipeline-plotly-chart,
+ .pipeline-matplotlib-chart {
width: calc(98% - 80px - #{$global-toolbar-width});
height: calc(92% - 80px);
margin: auto;
@@ -126,7 +127,7 @@
font-size: 1.6em;
}
-@media (max-width: $plotly-modal-breakpoint) {
+@media (max-width: $metadata-modal-breakpoint) {
.pipeline-plot-modal__collapse-plot {
width: auto;
}
diff --git a/src/components/plotly-modal/plotly-modal.test.js b/src/components/metadata-modal/metadata-modal.test.js
similarity index 81%
rename from src/components/plotly-modal/plotly-modal.test.js
rename to src/components/metadata-modal/metadata-modal.test.js
index 9e32aa9604..683b118ed7 100644
--- a/src/components/plotly-modal/plotly-modal.test.js
+++ b/src/components/metadata-modal/metadata-modal.test.js
@@ -1,5 +1,5 @@
import React from 'react';
-import PlotlyModal from './plotly-modal';
+import MetadataModal from './metadata-modal';
import { toggleNodeClicked, addNodeMetadata } from '../../actions/nodes';
import { setup } from '../../utils/state.mock';
import { togglePlotModal } from '../../actions';
@@ -9,7 +9,7 @@ const metricsNodeID = '966b9734';
describe('Plotly Modal', () => {
const mount = (props) => {
- return setup.mount(
, {
+ return setup.mount(
, {
beforeLayoutActions: [() => toggleNodeClicked(props.nodeId)],
afterLayoutActions: [
() => togglePlotModal(true),
@@ -19,19 +19,19 @@ describe('Plotly Modal', () => {
};
it('renders without crashing', () => {
const wrapper = mount({ nodeId: metricsNodeID });
- expect(wrapper.find('.pipeline-plotly-modal').length).toBe(1);
+ expect(wrapper.find('.pipeline-metadata-modal').length).toBe(1);
});
it('modal closes when collapse button is clicked', () => {
const wrapper = mount({ nodeId: metricsNodeID });
wrapper.find('.pipeline-plot-modal__collapse-plot').simulate('click');
- expect(wrapper.find('.pipeline-plotly-modal').length).toBe(0);
+ expect(wrapper.find('.pipeline-metadata-modal').length).toBe(0);
});
it('modal closes when back button is clicked', () => {
const wrapper = mount({ nodeId: metricsNodeID });
wrapper.find('.pipeline-plot-modal__back').simulate('click');
- expect(wrapper.find('.pipeline-plotly-modal').length).toBe(0);
+ expect(wrapper.find('.pipeline-metadata-modal').length).toBe(0);
});
it('shows plot when a plot node is clicked', () => {
diff --git a/src/components/metadata/metadata.js b/src/components/metadata/metadata.js
index 99d2a73fd1..80ece95ef5 100644
--- a/src/components/metadata/metadata.js
+++ b/src/components/metadata/metadata.js
@@ -29,22 +29,28 @@ const MetaData = ({
visibleCode,
onToggleCode,
onToggleNodeSelected,
- onTogglePlotModal,
+ onToggleMetadataModal,
}) => {
// Hide code panel when selected metadata changes
useEffect(() => onToggleCode(false), [metadata, onToggleCode]);
// Hide plot modal when selected metadata changes
- useEffect(() => onTogglePlotModal(false), [metadata, onTogglePlotModal]);
+ useEffect(
+ () => onToggleMetadataModal(false),
+ [metadata, onToggleMetadataModal]
+ );
+
const isTaskNode = metadata?.type === 'task';
const isDataNode = metadata?.type === 'data';
const isParametersNode = metadata?.type === 'parameters';
const nodeTypeIcon = getShortType(metadata?.datasetType, metadata?.type);
const hasPlot = Boolean(metadata?.plot);
+ const hasImage = Boolean(metadata?.image);
const hasTrackingData = Boolean(metadata?.trackingData);
const hasCode = Boolean(metadata?.code);
const isTranscoded = Boolean(metadata?.originalType);
const showCodePanel = visible && visibleCode && hasCode;
const showCodeSwitch = hasCode;
+
let runCommand = metadata?.runCommand;
if (!runCommand) {
// provide a help text for user to know why the run command is not available for the task node
@@ -70,7 +76,7 @@ const MetaData = ({
};
const onExpandPlotClick = () => {
- onTogglePlotModal(true);
+ onToggleMetadataModal(true);
};
return (
@@ -212,6 +218,29 @@ const MetaData = ({
)}
+ {hasImage && (
+ <>
+
+
+
+
+
+ )}