# HG changeset patch
# User Sebastien Jodogne <s.jodogne@gmail.com>
# Date 1606495426 -3600
# Node ID 3d62634d442f312bf98ec83fc3549b273ba959b5
# Parent  902d13889ae4318c1e73e909b94623bc6fc7c5c2
multiple multiframe is working

diff -r 902d13889ae4 -r 3d62634d442f Applications/StoneWebViewer/WebApplication/app.js
--- a/Applications/StoneWebViewer/WebApplication/app.js	Fri Nov 27 17:15:09 2020 +0100
+++ b/Applications/StoneWebViewer/WebApplication/app.js	Fri Nov 27 17:43:46 2020 +0100
@@ -140,22 +140,29 @@
         this.cineTimeoutId = null;
       }
 
-      var studyInstanceUid = newVal.tags[STUDY_INSTANCE_UID];
-      var seriesInstanceUid = newVal.tags[SERIES_INSTANCE_UID];
+      var studyInstanceUid = newVal.series.tags[STUDY_INSTANCE_UID];
+      var seriesInstanceUid = newVal.series.tags[SERIES_INSTANCE_UID];
       stone.SpeedUpFetchSeriesMetadata(studyInstanceUid, seriesInstanceUid);
 
-      if ((newVal.type == stone.ThumbnailType.IMAGE ||
-           newVal.type == stone.ThumbnailType.NO_PREVIEW) &&
-          newVal.complete) {
+      if ((newVal.series.type == stone.ThumbnailType.IMAGE ||
+           newVal.series.type == stone.ThumbnailType.NO_PREVIEW) &&
+          newVal.series.complete) {
         this.status = 'ready';
 
         var that = this;
         Vue.nextTick(function() {
-          stone.LoadSeriesInViewport(that.canvasId, seriesInstanceUid);
+          if (newVal.sopInstanceUid !== undefined &&
+              newVal.sopInstanceUid.length > 0) {
+            stone.LoadMultipartInstanceInViewport(
+              that.canvasId, seriesInstanceUid, newVal.sopInstanceUid);
+          }
+          else {
+            stone.LoadSeriesInViewport(that.canvasId, seriesInstanceUid);
+          }
         });
       }
-      else if (newVal.type == stone.ThumbnailType.PDF) {
-        if (newVal.complete) {
+      else if (newVal.series.type == stone.ThumbnailType.PDF) {
+        if (newVal.series.complete) {
           /**
            * Series is complete <=> One already knows about the
            * SOPInstanceUIDs that are available in this series. As a
@@ -173,7 +180,7 @@
           pendingSeriesPdf_[seriesInstanceUid] = true;
         }
       }
-      else if (newVal.type == stone.ThumbnailType.VIDEO) {
+      else if (newVal.series.type == stone.ThumbnailType.VIDEO) {
         this.status = 'video';
         console.warn('Videos are not supported by the Stone Web viewer yet');
       }
@@ -202,9 +209,9 @@
       var pdfPointer = args.detail.pdfPointer;
       var pdfSize = args.detail.pdfSize;
 
-      if ('tags' in that.content &&
-          that.content.tags[STUDY_INSTANCE_UID] == studyInstanceUid &&
-          that.content.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) {
+      if ('tags' in that.content.series &&
+          that.content.series.tags[STUDY_INSTANCE_UID] == studyInstanceUid &&
+          that.content.series.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) {
 
         that.status = 'pdf';
         var pdf = new Uint8Array(HEAPU8.subarray(pdfPointer, pdfPointer + pdfSize));
@@ -339,28 +346,28 @@
       viewport1Left: '0%',
       viewport1Top: '0%',
       viewport1Visible: true,
-      viewport1Content: {},
+      viewport1Content: { series: {} },
       
       viewport2Width: '100%',
       viewport2Height: '100%',
       viewport2Left: '0%',
       viewport2Top: '0%',
       viewport2Visible: false,
-      viewport2Content: {},
+      viewport2Content: { series: {} },
 
       viewport3Width: '100%',
       viewport3Height: '100%',
       viewport3Left: '0%',
       viewport3Top: '0%',
       viewport3Visible: false,
-      viewport3Content: {},
+      viewport3Content: { series: {} },
 
       viewport4Width: '100%',
       viewport4Height: '100%',
       viewport4Left: '0%',
       viewport4Top: '0%',
       viewport4Visible: false,
-      viewport4Content: {},
+      viewport4Content: { series: {} },
 
       showWindowing: false,
       windowingPresets: [],
@@ -423,17 +430,35 @@
     GetActiveSeries: function() {
       var s = [];
 
-      if ('tags' in this.viewport1Content)
-        s.push(this.viewport1Content.tags[SERIES_INSTANCE_UID]);
+      if ('tags' in this.viewport1Content.series)
+        s.push(this.viewport1Content.series.tags[SERIES_INSTANCE_UID]);
+
+      if ('tags' in this.viewport2Content.series)
+        s.push(this.viewport2Content.series.tags[SERIES_INSTANCE_UID]);
 
-      if ('tags' in this.viewport2Content)
-        s.push(this.viewport2Content.tags[SERIES_INSTANCE_UID]);
+      if ('tags' in this.viewport3Content.series)
+        s.push(this.viewport3Content.series.tags[SERIES_INSTANCE_UID]);
+
+      if ('tags' in this.viewport4Content.series)
+        s.push(this.viewport4Content.series.tags[SERIES_INSTANCE_UID]);
+
+      return s;
+    },
 
-      if ('tags' in this.viewport3Content)
-        s.push(this.viewport3Content.tags[SERIES_INSTANCE_UID]);
+    GetActiveMultiframeInstances: function() {
+      var s = [];
+
+      if ('sopInstanceUid' in this.viewport1Content)
+        s.push(this.viewport1Content.sopInstanceUid);
 
-      if ('tags' in this.viewport4Content)
-        s.push(this.viewport4Content.tags[SERIES_INSTANCE_UID]);
+      if ('sopInstanceUid' in this.viewport2Content)
+        s.push(this.viewport2Content.sopInstanceUid);
+
+      if ('sopInstanceUid' in this.viewport3Content)
+        s.push(this.viewport3Content.sopInstanceUid);
+
+      if ('sopInstanceUid' in this.viewport4Content)
+        s.push(this.viewport4Content.sopInstanceUid);
 
       return s;
     },
@@ -535,19 +560,32 @@
     },
     
     SetViewportSeries: function(viewportIndex, info) {
+      console.log(info);
       var series = this.series[info.seriesIndex];
       
       if (viewportIndex == 1) {
-        this.viewport1Content = series;
+        this.viewport1Content = {
+          series: series,
+          sopInstanceUid: info.sopInstanceUid
+        };
       }
       else if (viewportIndex == 2) {
-        this.viewport2Content = series;
+        this.viewport2Content = {
+          series: series,
+          sopInstanceUid: info.sopInstanceUid
+        };
       }
       else if (viewportIndex == 3) {
-        this.viewport3Content = series;
+        this.viewport3Content = {
+          series: series,
+          sopInstanceUid: info.sopInstanceUid
+        };
       }
       else if (viewportIndex == 4) {
-        this.viewport4Content = series;
+        this.viewport4Content = {
+          series: series,
+          sopInstanceUid: info.sopInstanceUid
+        };
       }
     },
     
@@ -557,6 +595,13 @@
       });
     },
     
+    ClickMultiframeInstance: function(seriesIndex, sopInstanceUid) {
+      this.SetViewportSeries(this.activeViewport, {
+        seriesIndex: seriesIndex,
+        sopInstanceUid: sopInstanceUid
+      });
+    },
+    
     HideViewport: function(index) {
       if (index == 1) {
         this.viewport1Visible = false;
@@ -685,24 +730,24 @@
         // https://fr.vuejs.org/2016/02/06/common-gotchas/#Why-isn%E2%80%99t-the-DOM-updating
         this.$set(this.series, index, series);
 
-        if ('tags' in this.viewport1Content &&
-            this.viewport1Content.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) {
-          this.$set(this.viewport1Content, series);
+        if ('tags' in this.viewport1Content.series &&
+            this.viewport1Content.series.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) {
+          this.$set(this.viewport1Content.series, series);
         }
 
-        if ('tags' in this.viewport2Content &&
-            this.viewport2Content.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) {
-          this.$set(this.viewport2Content, series);
+        if ('tags' in this.viewport2Content.series &&
+            this.viewport2Content.series.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) {
+          this.$set(this.viewport2Content.series, series);
         }
 
-        if ('tags' in this.viewport3Content &&
-            this.viewport3Content.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) {
-          this.$set(this.viewport3Content, series);
+        if ('tags' in this.viewport3Content.series &&
+            this.viewport3Content.series.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) {
+          this.$set(this.viewport3Content.series, series);
         }
 
-        if ('tags' in this.viewport4Content &&
-            this.viewport4Content.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) {
-          this.$set(this.viewport4Content, series);
+        if ('tags' in this.viewport4Content.series &&
+            this.viewport4Content.series.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) {
+          this.$set(this.viewport4Content.series, series);
         }
       }
     },
diff -r 902d13889ae4 -r 3d62634d442f Applications/StoneWebViewer/WebApplication/index.html
--- a/Applications/StoneWebViewer/WebApplication/index.html	Fri Nov 27 17:15:09 2020 +0100
+++ b/Applications/StoneWebViewer/WebApplication/index.html	Fri Nov 27 17:43:46 2020 +0100
@@ -244,7 +244,7 @@
 
                           <!-- Series with multiple multiframe instances (CINE) -->
                           <li class="wvSerieslist__seriesItem"
-                              v-bind:class="{ highlighted : GetActiveSeries().includes(series[seriesIndex].tags['0020,000e']), 'wvSerieslist__seriesItem--list' : leftMode != 'grid', 'wvSerieslist__seriesItem--grid' : leftMode == 'grid' }"
+                              v-bind:class="{ highlighted : GetActiveMultiframeInstances().includes(sopInstanceUid), 'wvSerieslist__seriesItem--list' : leftMode != 'grid', 'wvSerieslist__seriesItem--grid' : leftMode == 'grid' }"
                               v-for="(numberOfFrames, sopInstanceUid) in series[seriesIndex].multiframeInstances"
                               v-on:dragstart="MultiframeInstanceDragStart($event, seriesIndex, sopInstanceUid)"
                               v-on:click="ClickMultiframeInstance(seriesIndex, sopInstanceUid)">
@@ -579,12 +579,12 @@
                          width: width, 
                          height: height }">
         <div v-bind:class="{ 'wvSplitpane__cellBorder--selected' : active, 
-                           'wvSplitpane__cellBorder' : content.color == '', 
-                           'wvSplitpane__cellBorder--blue' : content.color == 'blue', 
-                           'wvSplitpane__cellBorder--red' : content.color == 'red',
-                           'wvSplitpane__cellBorder--green' : content.color == 'green', 
-                           'wvSplitpane__cellBorder--yellow' : content.color == 'yellow', 
-                           'wvSplitpane__cellBorder--violet' : content.color == 'violet'
+                           'wvSplitpane__cellBorder' : content.series.color == '', 
+                           'wvSplitpane__cellBorder--blue' : content.series.color == 'blue', 
+                           'wvSplitpane__cellBorder--red' : content.series.color == 'red',
+                           'wvSplitpane__cellBorder--green' : content.series.color == 'green', 
+                           'wvSplitpane__cellBorder--yellow' : content.series.color == 'yellow', 
+                           'wvSplitpane__cellBorder--violet' : content.series.color == 'violet'
                            }" 
              ondragover="event.preventDefault()"
              v-on:drop="DragDrop($event)"
@@ -600,14 +600,14 @@
 
               <div v-show="showInfo">
                 <div class="wv-overlay">
-                  <div v-if="'tags' in content" class="wv-overlay-topleft">
-                    {{ content.tags['0010,0010'] }}<br/>
-                    {{ content.tags['0010,0020'] }}
+                  <div v-if="'tags' in content.series" class="wv-overlay-topleft">
+                    {{ content.series.tags['0010,0010'] }}<br/>
+                    {{ content.series.tags['0010,0020'] }}
                   </div>
-                  <div v-if="'tags' in content" class="wv-overlay-topright">
-                    {{ content.tags['0008,1030'] }}<br/>
-                    {{ app.FormatDate(content.tags['0008,0020']) }}<br/>
-                    {{ content.tags['0020,0011'] }} | {{ content.tags['0008,103e'] }}
+                  <div v-if="'tags' in content.series" class="wv-overlay-topright">
+                    {{ content.series.tags['0008,1030'] }}<br/>
+                    {{ app.FormatDate(content.series.tags['0008,0020']) }}<br/>
+                    {{ content.series.tags['0020,0011'] }} | {{ content.series.tags['0008,103e'] }}
                   </div>
                   <div class="wv-overlay-timeline-wrapper wvPrintExclude">
                     <div style="text-align:left; padding:5px" v-show="numberOfFrames != 0">