Preview for the HCS images (#2489) - "Channels settings" panel

epam · Feb 10, 2022 · ca5d383 · ca5d383
1 parent 4ac153e
commit ca5d383
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 14 deletions.
diff --git a/client/src/components/special/hcs-image/hcs-image-controls/channel.js b/client/src/components/special/hcs-image/hcs-image-controls/channel.js
@@ -73,6 +73,7 @@ class Channel extends React.PureComponent {
       };
       return (
         <Popover
+          overlayClassName="popover-overlay-content-no-padding"
           onVisibleChange={handleColorPickerVisibility}
           key="color picker"
           trigger={['click']}

diff --git a/client/src/components/special/hcs-image/hcs-image-controls/color-map.js b/client/src/components/special/hcs-image/hcs-image-controls/color-map.js
@@ -47,10 +47,11 @@ function ColorMap (
         Blending mode:
       </span>
       <Select
+        allowClear={colorMap !== ''}
         value={colorMap}
         disabled={pending}
         className={styles.colorMapSelector}
-        onChange={hcsViewerState.changeColorMap}
+        onChange={(o) => hcsViewerState.changeColorMap(o || '')}
       >
         <Select.Option key="empty" value="">
           <i className="cp-text-not-important">Unset</i>

diff --git a/client/src/components/special/hcs-image/hcs-image.css b/client/src/components/special/hcs-image/hcs-image.css
@@ -88,37 +88,62 @@
   width: 100%;
 }
 
-.details-panel {
+.configuration-actions {
   position: absolute;
   top: 5px;
-  left: 5px;
-  bottom: 5px;
+  right: 5px;
+  z-index: 1;
+}
+
+.configuration-actions .action {
+  margin: 5px;
+  line-height: 1;
+}
+
+.details-panel,
+.configuration {
+  position: absolute;
+  top: 5px;
+  max-height: calc(100% - 10px);
   z-index: 2;
+  display: flex;
+  overflow: auto;
+}
+
+.configuration {
+  right: 5px;
+  width: 300px;
+}
+
+.details-panel {
+  left: 5px;
   max-width: 300px;
   min-width: 200px;
 }
 
-.details-panel-content {
+.panel-content {
+  flex: 1;
+  overflow: auto;
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-height: 100%;
   border-radius: 2px;
 }
 
-.details-panel .details-panel-content .details-header {
+.panel-content .panel-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 5px;
 }
 
-.details-panel .details-panel-content .details {
+.panel-content .content {
   flex: 1;
   overflow: auto;
 }
 
-.details-panel .close-button {
+.details-panel .close-button,
+.configuration .close-button {
   cursor: pointer;
 }
 

diff --git a/client/src/components/special/hcs-image/hcs-image.js b/client/src/components/special/hcs-image/hcs-image.js
@@ -48,7 +48,8 @@ class HcsImage extends React.PureComponent {
     wellWidth: 0,
     wellHeight: 0,
     sequences: [],
-    showDetails: false
+    showDetails: false,
+    showConfiguration: false
   };
 
   @observable hcsInfo;
@@ -352,6 +353,18 @@ class HcsImage extends React.PureComponent {
     });
   }
 
+  showConfiguration = () => {
+    this.setState({
+      showConfiguration: true
+    });
+  }
+
+  hideConfiguration = () => {
+    this.setState({
+      showConfiguration: false
+    });
+  }
+
   showDetailsPanel = () => {
     const {
       children,
@@ -364,12 +377,12 @@ class HcsImage extends React.PureComponent {
         <div
           className={
             classNames(
-              styles.detailsPanelContent,
+              styles.panelContent,
               'cp-panel-card'
             )
           }
         >
-          <div className={styles.detailsHeader}>
+          <div className={styles.panelHeader}>
             <b>{detailsTitle}</b>
             <Icon
               className={styles.closeButton}
@@ -378,14 +391,74 @@ class HcsImage extends React.PureComponent {
               onClick={this.hideDetails}
             />
           </div>
-          <div className={styles.details}>
+          <div className={styles.content}>
             {children}
           </div>
         </div>
       </div>
     );
   }
 
+  renderConfigurationActions = () => {
+    const {
+      error,
+      showConfiguration
+    } = this.state;
+    if (
+      error ||
+      !this.hcsViewerState ||
+      !this.hcsViewerState.channels ||
+      !this.hcsViewerState.channels.length
+    ) {
+      return null;
+    }
+    if (!showConfiguration) {
+      return (
+        <div
+          className={styles.configurationActions}
+        >
+          <Button
+            className={styles.action}
+            size="small"
+            onClick={this.showConfiguration}
+          >
+            <Icon
+              type="setting"
+              className="cp-larger"
+            />
+          </Button>
+        </div>
+      );
+    }
+    return (
+      <div
+        className={styles.configuration}
+      >
+        <div
+          className={
+            classNames(
+              styles.panelContent,
+              'cp-panel-card'
+            )
+          }
+        >
+          <div className={styles.panelHeader}>
+            <b>Settings</b>
+            <Icon
+              className={styles.closeButton}
+              type="close"
+              size="small"
+              onClick={this.hideConfiguration}
+            />
+          </div>
+          <div className={styles.content}>
+            <HcsImageControls />
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   render () {
     const {
       className,
@@ -459,6 +532,9 @@ class HcsImage extends React.PureComponent {
                 </div>
               )
             }
+            {
+              !error && this.renderConfigurationActions()
+            }
             {
               showDetails
                 ? this.showDetailsPanel()
@@ -486,7 +562,6 @@ class HcsImage extends React.PureComponent {
               )
             }
           >
-            <HcsImageControls />
             <HcsCellSelector
               className={styles.selectorContainer}
               cells={wells}

diff --git a/client/src/staticStyles/antd-extensions.css b/client/src/staticStyles/antd-extensions.css
@@ -30,3 +30,7 @@
 .ant-collapse > .ant-collapse-item.cp-collapse-body-no-padding > .ant-collapse-content {
   padding: 0;
 }
+
+.ant-popover.popover-overlay-content-no-padding .ant-popover-inner-content {
+  padding: 0;
+}