From 4b137c3d5116eb98be328822590100614b655ed7 Mon Sep 17 00:00:00 2001
From: Aleksandr Gorodetskii
 <41908792+AleksandrGorodetskii@users.noreply.github.com>
Date: Mon, 4 Nov 2024 19:51:02 +0300
Subject: [PATCH] GUI HCS Viewer: view settings (#3757)

---
 .../components/special/hcs-image/hcs-image.js | 112 +++++++++++-------
 .../hcs-z-position-selector/index.js          |   2 +
 .../hcs-image/utilities/hcs-image-info.js     |  21 +++-
 3 files changed, 88 insertions(+), 47 deletions(-)

diff --git a/client/src/components/special/hcs-image/hcs-image.js b/client/src/components/special/hcs-image/hcs-image.js
index 77abb73507..0f3c13c28a 100644
--- a/client/src/components/special/hcs-image/hcs-image.js
+++ b/client/src/components/special/hcs-image/hcs-image.js
@@ -117,6 +117,17 @@ class HcsImage extends React.PureComponent {
     return (this.hcsInfo.sequences || []).map(s => s);
   }
 
+  @computed
+  get viewSettings () {
+    return this.hcsInfo?.viewSettings || {
+      video: true,
+      analysis: true,
+      plate: true,
+      well: true,
+      timeseries: true
+    };
+  }
+
   get selectedSequences () {
     const {selectedSequenceTimePoints = []} = this.state;
     const selectedSequencesIds = [
@@ -731,7 +742,9 @@ class HcsImage extends React.PureComponent {
     ) {
       return null;
     }
-    const analysisAvailable = this.hcsAnalysis && this.hcsAnalysis.available;
+    const analysisAvailable = this.hcsAnalysis &&
+      this.hcsAnalysis.available &&
+      this.viewSettings.analysis;
     const selectedImage = this.selectedWellFields[0];
     if (!showConfiguration) {
       return (
@@ -749,14 +762,16 @@ class HcsImage extends React.PureComponent {
               </Button>
             )
           }
-          <VideoButton
-            className={styles.action}
-            videoSource={this.hcsVideoSource}
-            available={
-              (this.selectedSequence && this.selectedSequence.timeSeries.length > 1) ||
-              (selectedImage && selectedImage.depth > 1)
-            }
-          />
+          {this.viewSettings.video ? (
+            <VideoButton
+              className={styles.action}
+              videoSource={this.hcsVideoSource}
+              available={
+                (this.selectedSequence && this.selectedSequence.timeSeries.length > 1) ||
+                (selectedImage && selectedImage.depth > 1)
+              }
+            />
+          ) : null}
           <HCSDownloadButton
             size="small"
             className={styles.action}
@@ -1004,6 +1019,7 @@ class HcsImage extends React.PureComponent {
       selectedWells = [],
       selectedFields = []
     } = this.state;
+    const viewSettings = this.viewSettings;
     const sequenceInfo = this.selectedSequence;
     const selectedWell = this.selectedWell;
     const selectedImage = this.selectedWellFields[0];
@@ -1022,48 +1038,56 @@ class HcsImage extends React.PureComponent {
               'cp-content-panel'
             )
           }
+          style={{width: 'fit-content'}}
         >
-          <HcsCellSelector
-            className={styles.selectorContainer}
-            title="Plate"
-            cells={sequenceInfo.wells}
-            selected={selectedWells}
-            onChange={this.changeWells}
-            width={HcsCellSelector.widthCorrection(plateWidth, sequenceInfo.wells)}
-            height={HcsCellSelector.heightCorrection(plateHeight, sequenceInfo.wells)}
-            showRulers
-            searchPlaceholder="Search wells"
-            showElementHint
-          />
-          <HcsCellSelector
-            className={styles.selectorContainer}
-            title={selectedWell.id}
-            cells={selectedWell.images}
-            selected={selectedFields}
-            onChange={this.changeWellImages}
-            gridMode="CROSS"
-            width={
-              HcsCellSelector.widthCorrection(selectedWell.width, selectedWell.images)
-            }
-            height={
-              HcsCellSelector.heightCorrection(selectedWell.height, selectedWell.images)
-            }
-            scaleToROI
-            radius={selectedWell.radius}
-          />
-          <HcsSequenceSelector
-            sequences={this.sequences}
-            selection={selectedSequenceTimePoints}
-            onChange={this.onChangeSequenceTimePoints}
-            multiple
-            style={{padding: 5}}
-          />
+          {viewSettings.plate ? (
+            <HcsCellSelector
+              className={styles.selectorContainer}
+              title="Plate"
+              cells={sequenceInfo.wells}
+              selected={selectedWells}
+              onChange={this.changeWells}
+              width={HcsCellSelector.widthCorrection(plateWidth, sequenceInfo.wells)}
+              height={HcsCellSelector.heightCorrection(plateHeight, sequenceInfo.wells)}
+              showRulers
+              searchPlaceholder="Search wells"
+              showElementHint
+            />
+          ) : null}
+          {viewSettings.well ? (
+            <HcsCellSelector
+              className={styles.selectorContainer}
+              title={selectedWell.id}
+              cells={selectedWell.images}
+              selected={selectedFields}
+              onChange={this.changeWellImages}
+              gridMode="CROSS"
+              width={
+                HcsCellSelector.widthCorrection(selectedWell.width, selectedWell.images)
+              }
+              height={
+                HcsCellSelector.heightCorrection(selectedWell.height, selectedWell.images)
+              }
+              scaleToROI
+              radius={selectedWell.radius}
+            />
+          ) : null}
+          {viewSettings.timeseries ? (
+            <HcsSequenceSelector
+              sequences={this.sequences}
+              selection={selectedSequenceTimePoints}
+              onChange={this.onChangeSequenceTimePoints}
+              multiple
+              style={{padding: 5, maxWidth: 300}}
+            />
+          ) : null}
           <HcsZPositionSelector
             image={selectedImage}
             selection={selectedZCoordinates}
             mergeZPlanes={mergeZPlanes}
             onChange={this.onChangeZCoordinates}
             multiple
+            style={{maxWidth: 300}}
           />
         </div>
       );
diff --git a/client/src/components/special/hcs-image/hcs-z-position-selector/index.js b/client/src/components/special/hcs-image/hcs-z-position-selector/index.js
index ff0b0624b1..dbf2d7a7d5 100644
--- a/client/src/components/special/hcs-image/hcs-z-position-selector/index.js
+++ b/client/src/components/special/hcs-image/hcs-z-position-selector/index.js
@@ -49,6 +49,7 @@ function buildZPositionsArray (max, zSize, zUnit) {
 function HcsZPositionSelector (props) {
   const {
     className,
+    style,
     image,
     selection: rawSelection = [0],
     onChange,
@@ -107,6 +108,7 @@ function HcsZPositionSelector (props) {
           className,
           styles.container
         )}
+      style={style}
     >
       <div
         className={styles.title}
diff --git a/client/src/components/special/hcs-image/utilities/hcs-image-info.js b/client/src/components/special/hcs-image/utilities/hcs-image-info.js
index 7d4b93d5cc..25d22e0e7f 100644
--- a/client/src/components/special/hcs-image/utilities/hcs-image-info.js
+++ b/client/src/components/special/hcs-image/utilities/hcs-image-info.js
@@ -28,6 +28,7 @@ import {createObjectStorageWrapper} from '../../../../utils/object-storage';
  * @property {number} width
  * @property {number} height
  * @property {Object} timeSeriesDetails
+ * @property {Object} viewSettings
  */
 
 class HCSInfo {
@@ -42,7 +43,8 @@ class HCSInfo {
       sourceDirectory,
       width,
       height,
-      timeSeriesDetails = {}
+      timeSeriesDetails = {},
+      viewSettings = {}
     } = options;
     const sequences = Object.keys(timeSeriesDetails);
     if (sequences.length === 0) {
@@ -80,6 +82,17 @@ class HCSInfo {
      * @type {number}
      */
     this.height = Number.isNaN(Number(height)) ? 0 : Number(height);
+    /**
+     * View settings (enable/disable functionality)
+     * @type {Object}
+     */
+    this.viewSettings = {
+      video: `${viewSettings.video}` !== 'false',
+      analysis: `${viewSettings.analysis}` !== 'false',
+      plate: `${viewSettings['plate_layout']}` !== 'false',
+      well: `${viewSettings['well_layout']}` !== 'false',
+      timeseries: `${viewSettings['timeseries_layout']}` !== 'false'
+    };
     /**
      * Sequences info
      * @type {HCSImageSequence[]}
@@ -167,7 +180,8 @@ class HCSInfo {
           sourceDir: sourceDirectory,
           plate_height: height,
           plate_width: width,
-          time_series_details: timeSeriesDetails = {}
+          time_series_details: timeSeriesDetails = {},
+          view_settings: viewSettings = {}
         } = json;
         resolve(
           new HCSInfo({
@@ -177,7 +191,8 @@ class HCSInfo {
             width,
             height,
             objectStorage,
-            timeSeriesDetails
+            timeSeriesDetails,
+            viewSettings
           })
         );
       } catch (e) {