Preview for the HCS images (#2489) - Data Sharing Service: z-plate & …

…time point selectors
epam · Feb 22, 2022 · 3a41916 · 3a41916
1 parent 11818ec
commit 3a41916
Show file tree

Hide file tree

Showing 13 changed files with 420 additions and 124 deletions.
diff --git a/data-sharing-service/client/public/hcs-image-viewer/hcs-image-inject.js b/data-sharing-service/client/public/hcs-image-viewer/hcs-image-inject.js
diff --git a/data-sharing-service/client/public/hcs-image-viewer/hcs-image.js b/data-sharing-service/client/public/hcs-image-viewer/hcs-image.js
diff --git a/data-sharing-service/client/src/components/special/hcs-image/hcs-image-controls/channels.js b/data-sharing-service/client/src/components/special/hcs-image/hcs-image-controls/channels.js
@@ -20,57 +20,56 @@ import {Icon} from 'antd';
 import Channel from './channel';
 import styles from './hcs-image-controls.css';
 
-@inject('hcsViewerState')
-@observer
-class HcsImageChannelsControl extends React.Component {
-  render () {
-    const {hcsViewerState = {}} = this.props;
-    const {
-      channels = [],
-      pending
-    } = hcsViewerState;
-    if (pending && channels.length === 0) {
-      return (
-        <div className={styles.channels}>
-          <i className="cp-text-not-important">Loading channels...</i>
-        </div>
-      );
-    }
-    if (channels.length === 0) {
-      return null;
-    }
+function HcsImageChannelsControl (
+  {
+    hcsViewerState
+  }
+) {
+  const {
+    channels = [],
+    pending
+  } = hcsViewerState || {};
+  if (pending && channels.length === 0) {
     return (
       <div className={styles.channels}>
-        <div className={styles.header}>
-          Channels:
-          {pending && (<Icon type="loading" style={{marginLeft: 5}} />)}
-        </div>
-        {
-          channels.map(channel => (
-            <Channel
-              key={channel.identifier}
-              identifier={channel.identifier}
-              name={channel.name}
-              visible={channel.visible}
-              color={channel.color}
-              domain={channel.domain}
-              contrastLimits={channel.contrastLimits}
-              loading={pending}
-              onVisibilityChanged={
-                (visible) => hcsViewerState.changeChannelVisibility(channel, visible)
-              }
-              onContrastLimitsChanged={
-                (limits) => hcsViewerState.changeChannelContrastLimits(channel, limits)
-              }
-              onColorChanged={
-                (color) => hcsViewerState.changeChannelColor(channel, color)
-              }
-            />
-          ))
-        }
+        <i className="cp-text-not-important">Loading channels...</i>
       </div>
     );
   }
+  if (channels.length === 0) {
+    return null;
+  }
+  return (
+    <div className={styles.channels}>
+      <div className={styles.header}>
+        Channels:
+        {pending && (<Icon type="loading" style={{marginLeft: 5}} />)}
+      </div>
+      {
+        channels.map(channel => (
+          <Channel
+            key={channel.identifier}
+            identifier={channel.identifier}
+            name={channel.name}
+            visible={channel.visible}
+            color={channel.color}
+            domain={channel.domain}
+            contrastLimits={channel.contrastLimits}
+            loading={pending}
+            onVisibilityChanged={
+              (visible) => hcsViewerState.changeChannelVisibility(channel, visible)
+            }
+            onContrastLimitsChanged={
+              (limits) => hcsViewerState.changeChannelContrastLimits(channel, limits)
+            }
+            onColorChanged={
+              (color) => hcsViewerState.changeChannelColor(channel, color)
+            }
+          />
+        ))
+      }
+    </div>
+  );
 }
 
-export default HcsImageChannelsControl;
+export default inject('hcsViewerState')(observer(HcsImageChannelsControl));