Preview for the HCS images (#2489) - possibility to hide HcsControlGr…

…id legends
epam · Feb 9, 2022 · 0a59d29 · 0a59d29
1 parent 0cf072b
commit 0a59d29
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 32 deletions.
diff --git a/client/src/components/special/hcs-image/hcs-control-grid/control-grid.css b/client/src/components/special/hcs-image/hcs-control-grid/control-grid.css
@@ -26,6 +26,10 @@
   flex-wrap: nowrap;
 }
 
+.header.no-legend {
+  margin-bottom: 5px;
+}
+
 .title {
   font-weight: bold;
 }
@@ -50,6 +54,11 @@
   min-height: 100px;
 }
 
+.canvas-container.no-legend {
+  grid-template-rows: [DATA] 1fr;
+  grid-template-columns: [DATA] 1fr;
+}
+
 .placeholder {
   grid-row: COLUMNS;
   grid-column: ROWS;

diff --git a/client/src/components/special/hcs-image/hcs-control-grid/index.js b/client/src/components/special/hcs-image/hcs-control-grid/index.js
@@ -510,7 +510,8 @@ class HcsControlGrid extends React.Component {
       controlledHeight,
       flipHorizontal,
       flipVertical,
-      title
+      title,
+      showLegend
     } = this.props;
     const {
       cellSize,
@@ -527,7 +528,10 @@ class HcsControlGrid extends React.Component {
           )
         }
       >
-        <div className={styles.header}>
+        <div className={classNames(
+          styles.header,
+          {[styles.noLegend]: !showLegend}
+        )}>
           {title ? (
             <div
               className={styles.title}
@@ -538,41 +542,52 @@ class HcsControlGrid extends React.Component {
           {this.renderZoomControls()}
         </div>
         <div
-          className={styles.canvasContainer}
+          className={classNames(
+            styles.canvasContainer,
+            {[styles.noLegend]: !showLegend}
+          )}
         >
-          <div className={styles.placeholder}>{'\u00A0'}</div>
-          <div
-            className={
-              classNames(
-                styles.rows,
+          {showLegend && (
+            <div className={styles.placeholder}>
+              {'\u00A0'}
+            </div>
+          )}
+          {showLegend && (
+            <div
+              className={
+                classNames(
+                  styles.rows,
+                  {
+                    [styles.flip]: flipVertical
+                  }
+                )
+              }
+            >
+              <div className={styles.legend} ref={this.initializeLegend()}>
                 {
-                  [styles.flip]: flipVertical
+                  cellSize && renderLegend(cellSize, rows, {height: cellSize})
                 }
-              )
-            }
-          >
-            <div className={styles.legend} ref={this.initializeLegend()}>
-              {
-                cellSize && renderLegend(cellSize, rows, {height: cellSize})
-              }
+              </div>
             </div>
-          </div>
-          <div
-            className={
-              classNames(
-                styles.columns,
+          )}
+          {showLegend && (
+            <div
+              className={
+                classNames(
+                  styles.columns,
+                  {
+                    [styles.flip]: flipHorizontal
+                  }
+                )
+              }
+            >
+              <div className={styles.legend} ref={this.initializeLegend(true)}>
                 {
-                  [styles.flip]: flipHorizontal
+                  cellSize && renderLegend(cellSize, columns, {width: cellSize})
                 }
-              )
-            }
-          >
-            <div className={styles.legend} ref={this.initializeLegend(true)}>
-              {
-                cellSize && renderLegend(cellSize, columns, {width: cellSize})
-              }
+              </div>
             </div>
-          </div>
+          )}
           <div
             className={
               classNames(
@@ -643,12 +658,14 @@ HcsControlGrid.propTypes = {
   allowEmptySpaces: PropTypes.bool,
   flipVertical: PropTypes.bool,
   flipHorizontal: PropTypes.bool,
-  title: PropTypes.string
+  title: PropTypes.string,
+  showLegend: PropTypes.bool
 };
 
 HcsControlGrid.defaultProps = {
   cellShape: Shapes.circle,
-  gridShape: Shapes.rect
+  gridShape: Shapes.rect,
+  showLegend: true
 };
 
 HcsControlGrid.Shapes = Shapes;

diff --git a/client/src/components/special/hcs-image/hcs-image-field-selector.js b/client/src/components/special/hcs-image/hcs-image-field-selector.js
@@ -65,6 +65,7 @@ class HcsImageFieldSelector extends React.Component {
           gridRadius={wellRadius}
           flipVertical
           title={wellName}
+          showLegend={false}
         />
       </div>
     );