Preview for the HCS images (#2489) - time & z-plane coordinates

epam · Feb 16, 2022 · 05aa363 · 05aa363
1 parent e69697b
commit 05aa363
Show file tree

Hide file tree

Showing 18 changed files with 587 additions and 328 deletions.
diff --git a/client/public/hcs-image-viewer/hcs-image-inject.js b/client/public/hcs-image-viewer/hcs-image-inject.js
diff --git a/client/public/hcs-image-viewer/hcs-image.js b/client/public/hcs-image-viewer/hcs-image.js
diff --git a/client/src/components/special/hcs-image/hcs-image.js b/client/src/components/special/hcs-image/hcs-image.js
@@ -37,7 +37,7 @@ class HcsImage extends React.PureComponent {
     sequencePending: false,
     error: undefined,
     sequenceId: undefined,
-    timepointId: undefined,
+    timePointId: undefined, // zero-based
     wells: [],
     fields: [],
     wellId: undefined,
@@ -167,22 +167,29 @@ class HcsImage extends React.PureComponent {
     }
   };
 
-  changeTimepoint = (sequence, timepoint) => {
+  changeTimePoint = (sequence, timePoint) => {
     const {
-      timepointId,
+      timePointId: currentTimePointId,
       sequenceId
     } = this.state;
-    if (timepoint === timepointId && sequence === sequenceId) {
+    const timePointId = timePoint
+      ? timePoint.id
+      : undefined;
+    if (timePoint === currentTimePointId && sequence === sequenceId) {
       return;
     }
     if (sequence !== sequenceId) {
-      this.changeSequence(sequence, timepoint);
+      this.changeSequence(sequence, timePointId);
     } else {
-      this.setState({timepointId: timepoint});
+      this.setState({timePointId}, () => {
+        if (this.hcsImageViewer) {
+          this.hcsImageViewer.setGlobalTimePosition(timePointId);
+        }
+      });
     }
   };
 
-  changeSequence = (sequenceId, timepointId) => {
+  changeSequence = (sequenceId, timePointId) => {
     const {sequenceId: currentSequenceId} = this.state;
     if (currentSequenceId !== sequenceId) {
       if (this.hcsInfo) {
@@ -197,11 +204,16 @@ class HcsImage extends React.PureComponent {
               .then(() => sequenceInfo.resignDataURLs())
               .then(() => {
                 const {wells = [], timeSeries = []} = sequenceInfo;
+                const defaultTimePointId = timeSeries.length > 0
+                  ? timeSeries[0].id
+                  : 0;
                 this.setState({
                   sequencePending: false,
                   error: undefined,
                   sequenceId,
-                  timepointId: timepointId || timeSeries[0],
+                  timePointId: timePointId === undefined
+                    ? defaultTimePointId
+                    : timePointId,
                   wells
                 }, () => {
                   const firstWell = wells[0];
@@ -276,7 +288,8 @@ class HcsImage extends React.PureComponent {
   loadImage = () => {
     const {
       sequenceId,
-      imageId
+      imageId,
+      timePointId
     } = this.state;
     if (this.hcsImageViewer && this.hcsInfo) {
       const {sequences = []} = this.hcsInfo;
@@ -287,7 +300,7 @@ class HcsImage extends React.PureComponent {
         this.hcsImageViewer.setData(url, offsetsJsonUrl)
           .then(() => {
             if (this.hcsImageViewer) {
-              this.hcsImageViewer.setImage({ID: imageId});
+              this.hcsImageViewer.setImage({ID: imageId, imageTimePoint: timePointId});
             }
           });
       }

diff --git a/client/src/components/special/hcs-image/utilities/hcs-image-sequence.js b/client/src/components/special/hcs-image/utilities/hcs-image-sequence.js
@@ -14,21 +14,23 @@
  *  limitations under the License.
  */
 
-/**
- * @typedef {string[]} HCSTimeSeries
- */
-
 import * as HCSConstants from './constants';
 import HCSImageWell from './hcs-image-well';
 
+/**
+ * @typedef {Object} HCSTimeSeries
+ * @property {string} id
+ * @property {string} name
+ */
+
 /**
  * @typedef {Object} HCSImageSequenceOptions
  * @property {HCSInfo} hcs
  * @property {string|number} storageId
  * @property {string} sequence
  * @property {string} directory
  * @property {ObjectStorage} objectStorage
- * @property {HCSTimeSeries[]} timeSeries
+ * @property {string[]} timeSeries
  */
 
 class HCSImageSequence {
@@ -56,7 +58,14 @@ class HCSImageSequence {
      * @type {ObjectStorage} object storage wrapper
      */
     this.objectStorage = objectStorage;
-    this.timeSeries = timeSeries;
+    /**
+     * @type {HCSTimeSeries[]}
+     */
+    this.timeSeries = timeSeries.map((time, index) => ({
+      id: index,
+      name: time
+    }));
+    console.log(this.timeSeries);
     this.omeTiffFileName = [directory, HCSConstants.OME_TIFF_FILE_NAME]
       .join(objectStorage.delimiter || '/');
     this.offsetsJsonFileName = [directory, HCSConstants.OFFSETS_JSON_FILE_NAME]

diff --git a/hcs-image-viewer/src/lib/state/default.js b/hcs-image-viewer/src/lib/state/default.js
@@ -28,6 +28,7 @@ export default {
 
   imageIndex: 0,
   imagePending: false,
+  imageTimePosition: 0,
 
   error: undefined,
   pending: false,