Changeset 4065

Timestamp:

Dec 14, 2007, 2:34:36 PM (16 years ago)

Author:

Nicklas Nordborg

Message:

Fixes #870 and #883: Overview plots and correction factor plots should be loaded one by one

Location:

branches/2.5-stable/www

Files:

• images/plot_empty_400x300.png (added)
• images/transparent_pixel.gif (added)
• views/experiments/bioassaysets/view_bioassayset.jsp (modified) (5 diffs)

branches/2.5-stable/www/views/experiments/bioassaysets/view_bioassayset.jsp

@@ -174 +174 @@
       }
     }
-    function changeImage(imageId, url)
-    {
+    function runItemPlugin(cmd)
+    {
+      Main.openPopup('index.jsp?ID=<%=ID%>&cmd='+cmd+'&experiment_id=<%=experimentId%>&item_id=<%=itemId%>', 'RunPlugin'+cmd, 740, 540);
+    }
+    var imageQueue = new Array();
+    var nextImage = 0;
+    function addImage(imageId, url)
+    {
+      imageQueue[imageQueue.length] = imageId;
       var img = document.getElementById(imageId);
-      img.src = url;
-    }
-    function runItemPlugin(cmd)
-    {
-      Main.openPopup('index.jsp?ID=<%=ID%>&cmd='+cmd+'&experiment_id=<%=experimentId%>&item_id=<%=itemId%>', 'RunPlugin'+cmd, 740, 540);
+      img.realSrc = url;
+    }
+    function imageLoaded()
+    {
+      nextImage++;
+      prepareNextImage();
+    }
+    function prepareNextImage()
+    {
+      if (imageQueue.length > nextImage)
+      {
+        var imageId = imageQueue[nextImage];
+        var img = document.getElementById(imageId);
+        img.src = '../../../images/plot_generating_400x300.gif';
+        setTimeout('loadNextImage()', 100);
+      }
+    }
+    function loadNextImage()
+    {
+      if (imageQueue.length > nextImage)
+      {
+        var imageId = imageQueue[nextImage];
+        var img = document.getElementById(imageId);
+        img.onload = imageLoaded;
+        img.src = img.realSrc;
+      }
     }
     </script>
+    <style>
+    .plot {
+      border: 1px solid #666666; 
+      background-image: url('../../../images/plot_empty_400x300.png');
+    }
+    </style>
   </base:head>
-  <base:body>
+  <base:body onload="loadNextImage()">
     <p>
     <p:path>
@@ -481 +515 @@
         ItemQuery<BioAssay> bioAssayQuery = bioAssaySet.getBioAssays();
         bioAssayQuery.order(Orders.asc(Hql.property("name")));
+        StringBuilder script = new StringBuilder();
         for (BioAssay bioAssay : bioAssayQuery.list(dc))
         {
@@ -488 +523 @@
           url += "&filter="+filter;
           url += "&title="+HTML.urlEncode(bioAssay.getName());
+          script.append("addImage('MA").append(bioAssay.getId()).append("','").
+              append(url).append("');\n");
           %>
           <img id="MA<%=bioAssay.getId()%>" 
-            src="../../../images/plot_generating_400x300.gif" 
-            width="400" height="300" 
+            src="../../../images/transparent_pixel.gif" 
+            width="400" height="300"
             alt="MA-plot for bioassay <%=HTML.encodeTags(bioAssay.getName())%>"
-            style="border: 1px solid #666666;">
-          <script language="JavaScript">
-          setTimeout("changeImage('MA<%=bioAssay.getId()%>', '<%=url%>')", 100);
-          </script>
+            class="plot"
+            >
           <%
         }
+        %>
+        <script language="JavaScript">
+        <%=script%>
+        </script>
+        <%
       }
       %>
@@ -513 +553 @@
         String xLabel = HTML.urlEncode("A, log10(ch1 * ch2) / 2");
         String yLabel = HTML.urlEncode("M, log2(ch1 / ch2)");
+        StringBuilder script = new StringBuilder();
         for (BioAssay bioAssay : bioAssayQuery.list(dc))
         {
@@ -519 +560 @@
           url += "&xLabel="+xLabel+"&yLabel="+yLabel;
           url += "&title="+HTML.urlEncode(bioAssay.getName());
+          script.append("addImage('CF").append(bioAssay.getId()).append("','").
+          append(url).append("');\n");
           %>
           <img id="CF<%=bioAssay.getId()%>" 
-            src="../../../images/plot_generating_400x300.gif" 
-            width="400" height="300" 
+            src="../../../images/transparent_pixel.gif" 
+            width="400" height="300"
             alt="Correction factor plot for bioassay <%=HTML.encodeTags(bioAssay.getName())%>"
-            style="border: 1px solid #666666;">
-          <script language="JavaScript">
-          setTimeout("changeImage('CF<%=bioAssay.getId()%>', '<%=url%>')", 100);
-          </script>
+            class="plot"
+            >
           <%
         }
+        %>
+        <script language="JavaScript">
+        <%=script%>
+        </script>
+        <%
       }
       %>