Fixes design issues in metadata panel

RELEASE.md

@@ -5,6 +5,12 @@
 - Use present tense (e.g. 'Add new feature')
 - Include the ID number for the related PR (or PRs) in parentheses
 -->
+# Upcoming Release
+
+## Bug fixes and other changes
+
+- Fixes design issues in metadata panel. (#2009)
+
 # Release 9.2.0
 
 ## Major features and improvements

src/components/json-object/json-object.scss

@@ -7,6 +7,11 @@
   margin-right: -35px;
   margin-top: 1.2em;
 
+  // to contain contents of parameter json similar to a metadata value
+  word-break: break-word;
+  white-space: pre-wrap;
+  display: contents;
+
   .pretty-json-container {
     font-family: variables.$font-monospace;
     font-size: 0.87em;

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

@@ -3,7 +3,7 @@
 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';
 import { togglePlotModal } from '../../actions';
@@ -61,17 +61,6 @@
             layout={metadata.preview.layout}
             view="modal"
           />
-          <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">
-                Collapse Plotly Visualization
-              </span>
-            </button>
-          </div>
         </>
       )}
       {hasImage && (

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

@@ -22,12 +22,6 @@ describe('Plotly Modal', () => {
     expect(wrapper.find('.pipeline-metadata-modal').length).toBe(1);
   });
 
-  it('modal closes when collapse button is clicked', () => {
-    const wrapper = mount({ nodeId: nodeID });
-    wrapper.find('.pipeline-metadata-modal__collapse-plot').simulate('click');
-    expect(wrapper.find('.pipeline-metadata-modal').length).toBe(0);
-  });
-
   it('modal closes when back button is clicked', () => {
     const wrapper = mount({ nodeId: nodeID });
     wrapper.find('.pipeline-metadata-modal__back').simulate('click');

src/components/metadata/metadata.js

@@ -284,7 +284,7 @@ const MetaData = ({
                   >
                     <ExpandIcon className="pipeline-metadata__link-icon"></ExpandIcon>
                     <span className="pipeline-metadata__link-text">
-                      Expand Plotly Visualization
+                      Expand preview
                     </span>
                   </button>
                 </>
@@ -307,7 +307,7 @@ const MetaData = ({
                   >
                     <ExpandIcon className="pipeline-metadata__link-icon"></ExpandIcon>
                     <span className="pipeline-metadata__link-text">
-                      Expand Matplotlib Image
+                      Expand preview
                     </span>
                   </button>
                 </>
@@ -332,11 +332,13 @@ const MetaData = ({
               {hasTablePreview && (
                 <>
                   <div className="pipeline-metadata__preview">
-                    <PreviewTable
-                      data={metadata?.preview}
-                      size="small"
-                      onClick={onExpandMetaDataClick}
-                    />
+                    <div className="scrollable-container">
+                      <PreviewTable
+                        data={metadata?.preview}
+                        size="small"
+                        onClick={onExpandMetaDataClick}
+                      />
+                    </div>
                     <div className="pipeline-metadata__preview-shadow-box-right" />
                     <div className="pipeline-metadata__preview-shadow-box-bottom" />
                   </div>
@@ -346,20 +348,22 @@ const MetaData = ({
                   >
                     <ExpandIcon className="pipeline-metadata__link-icon"></ExpandIcon>
                     <span className="pipeline-metadata__link-text">
-                      Expand Preview Table
+                      Expand preview
                     </span>
                   </button>
                 </>
               )}
               {hasJSONPreview && (
                 <>
                   <div className="pipeline-metadata__preview-json">
-                    <JSONObject
-                      value={JSON.parse(metadata.preview)}
-                      theme={theme}
-                      style={{ background: 'transparent', fontSize: '14px' }}
-                      collapsed={3}
-                    />
+                    <div className="scrollable-container">
+                      <JSONObject
+                        value={JSON.parse(metadata.preview)}
+                        theme={theme}
+                        style={{ background: 'transparent', fontSize: '14px' }}
+                        collapsed={3}
+                      />
+                    </div>
                     <div className="pipeline-metadata__preview-shadow-box-right" />
                     <div className="pipeline-metadata__preview-shadow-box-bottom" />
                   </div>
@@ -369,7 +373,7 @@ const MetaData = ({
                   >
                     <ExpandIcon className="pipeline-metadata__link-icon"></ExpandIcon>
                     <span className="pipeline-metadata__link-text">
-                      Expand JSON View
+                      Expand preview
                     </span>
                   </button>
                 </>

src/components/metadata/styles/metadata-code.scss

@@ -26,7 +26,7 @@
   padding: 0 variables.$metadata-sidebar-width-open 0 0;
   transform: translateX(100vw);
   transition: transform ease 0.5s 0.1s, left ease 0.5s;
-  z-index: 2;
+  z-index: variables.$z-index-metadata-code;
 
   &--visible {
     transform: translateX(variables.$global-toolbar-width);

src/components/metadata/styles/metadata.scss

@@ -28,12 +28,11 @@
   top: -1px; /* Avoids pixel rounding gaps */
   right: -1px;
   bottom: -1px;
-  z-index: 2;
+  z-index: variables.$z-index-metadata-panel;
   display: flex;
   flex-direction: column;
   width: 100%;
   max-width: variables.$metadata-sidebar-width-open;
-  padding: 6px 0 0;
   overflow: hidden auto;
   background: var(--color-metadata-bg);
   border-left: 1px solid var(--color-border-line);
@@ -51,8 +50,8 @@
 
 .pipeline-metadata__close-button {
   position: absolute;
-  top: 2px;
-  right: -14px;
+  top: 0;
+  right: 0;
 
   &,
   & svg {
@@ -63,21 +62,20 @@
 
 .pipeline-metadata__label,
 .pipeline-metadata__row {
-  margin: 2.285em 36px;
+  margin: 32px 36px;
 }
 
 .pipeline-metadata__header {
   display: flex;
   justify-content: space-between;
-  margin-top: -0.12em;
 }
 
 .pipeline-metadata__header-toolbox {
   position: relative;
   display: flex;
   flex-direction: column-reverse;
   justify-content: space-between;
-  margin: 3em 3.6em;
+  margin: 3.2em 3.6em;
   padding-right: 24px;
 }
 
@@ -238,8 +236,12 @@ $list-inline-spacing: 0.2em;
 .pipeline-metadata__properties {
   flex-grow: 1;
   height: 0;
-  margin-top: -3em;
+  margin-top: auto;
   overflow-y: auto;
+
+  & :nth-child(1) {
+    margin-top: 0;
+  }
 }
 
 .pipeline-metadata__link {
@@ -261,12 +263,12 @@ $list-inline-spacing: 0.2em;
 .pipeline-metadata__link-icon {
   width: 1.9em;
   height: 1.9em;
-  margin: 0 6px 0 36px;
+  margin: 0 0.8em 0 0;
   fill: var(--color-button-text);
 }
 
 .pipeline-metadata__link-text {
-  margin: 12px 10px 12px 5px;
+  margin: 18px 0;
   color: var(--color-button-text);
   font-size: 1.6em;
 }
@@ -281,16 +283,26 @@ $list-inline-spacing: 0.2em;
 .pipeline-metadata__preview {
   background: var(--color-metadata-preview-bg);
   height: 300px;
-  overflow: hidden;
   position: relative;
 }
 
 .pipeline-metadata__preview-json {
   background: var(--color-metadata-preview-bg);
   height: 300px;
-  overflow: hidden;
   position: relative;
-  padding: 10px 20px 0;
+  padding: 10px 0 0 20px;
+
+  .scrollable-container {
+    padding-bottom: 10px;
+  }
+}
+
+.scrollable-container {
+  overflow: scroll;
+  max-width: 400px;
+  max-height: 300px;
+  height: 100%;
+  width: 100%;
 }
 
 .pipeline-metadata__preview-shadow-box-right {

src/components/ui/command-copier/command-copier.scss

@@ -11,6 +11,7 @@
   align-items: center;
   font-family: variables.$font-monospace;
   font-size: 13px;
+  padding-right: 24px;
 
   &--no-visible {
     opacity: 0;
@@ -32,7 +33,7 @@
   display: block;
   width: 26px;
   height: 34px;
-  margin: -0.1em 0 0 auto;
+  margin: -0.1em 0 0;
   padding: 0;
   list-style: none;
 }
@@ -41,7 +42,6 @@
   width: auto;
   height: auto;
   margin-top: 0.3em;
-  margin-right: -0.6em;
   opacity: 0.55;
 
   .pipeline-icon {

src/components/ui/toggle/toggle.scss

@@ -19,9 +19,9 @@
 }
 
 .pipeline-toggle {
-  margin-top: 0.3em;
-  margin-bottom: 2em;
+  margin-bottom: 3.2em;
   transition: opacity 0.2s ease;
+  display: flex;
 }
 
 .pipeline-toggle--no-hasCode {
@@ -41,7 +41,7 @@
 
 .pipeline-toggle-label {
   position: relative;
-  padding: 0 0 0 2.8em;
+  padding: 0.1em 0 0 2.2em;
   cursor: pointer;
   user-select: none;
   color: var(--color-toggle-off-label);

src/styles/_variables.scss

@@ -27,6 +27,10 @@ $metadata-modal-breakpoint: 700px;
 $global-toolbar-width: 80px;
 $run-list-controls-height: 95px;
 
+// -- levels -- //
+$z-index-metadata-panel: 3;
+$z-index-metadata-code: 3;
+
 // Micro-animation
 $run-width: 375px;
 $run-width-comparison-view: 310px;