[bot] Merge 24.4 to develop

lincs/resources/views/CustomGCT.html

@@ -7,9 +7,13 @@
         var url = LABKEY.ActionURL.buildURL("lincs", "createCustomGCT", LABKEY.ActionURL.getContainer());
         window.location = url;
     }
+    LABKEY.Utils.onReady(function()
+    {
+        document.getElementById("customGctButton").onclick = function() { showCustomGCTForm(); };
+    });
 
 </script>
 
 <div style="margin:20px;">
-    <a class="button" id="customGctButton" onclick="showCustomGCTForm()">Create Custom GCT</a>
+    <a class="button" id="customGctButton">Create Custom GCT</a>
 </div>

lincs/src/org/labkey/lincs/view/customGCTForm.jsp

@@ -140,24 +140,33 @@
 
     function onChange(field, newValue, oldValue, eOpts)
     {
-        // console.log(newValue, oldValue);
-        var comboboxId = field.id ;
-        var owningDiv = Ext4.get(comboboxId + '_selected');
+        const comboboxId = field.id ;
+        const owningDiv = Ext4.get(comboboxId + '_selected');
 
         if(!owningDiv) return;
 
-        var selectedHtml = "";
-        for(var i = 0; i < newValue.length; i += 1)
+        let selectedHtml = "";
+        const deleteIconsMap = {}; // map of deleteIconId -> annotation value
+        for(let i = 0; i < newValue.length; i += 1)
         {
-            var record = field.findRecordByValue(newValue[i]);
-            var nameValue = newValue[i];
-            var displayValue = record ? record.get("DisplayName") : nameValue;
-            var spanId = comboboxId + "_span";
-            selectedHtml += '<img src="/labkey/_images/delete.png" style="width:10px; height:10px; margin-right:3px" ';
-            selectedHtml += "onclick=\"deleteSelected('" + comboboxId + "', '" + nameValue + "');\"/>";
-            selectedHtml += '<span id="' +spanId + '">' + displayValue + '</span><br>';
+            const record = field.findRecordByValue(newValue[i]);
+            const nameValue = newValue[i];
+            const displayValue = record ? record.get("DisplayName") : nameValue;
+            const deleteIconId = comboboxId + "-delete-icon-" + Ext4.id();
+            selectedHtml += "<img src='<%=getWebappURL("/_images/delete.png")%>' style='width:10px; height:10px; margin-right:3px' id='" + deleteIconId + "'/>";
+            selectedHtml += '<span>' + Ext4.util.Format.htmlEncode(displayValue) + '</span><br>';
+            deleteIconsMap[deleteIconId] = nameValue;
         }
         owningDiv.dom.innerHTML = selectedHtml;
+
+        // Attach event handlers to the delete icons
+        Object.keys(deleteIconsMap).forEach(iconId => {
+            const annotationVal = deleteIconsMap[iconId];
+            document.getElementById(iconId).addEventListener('click', function()
+            {
+                deleteSelected(comboboxId, annotationVal);
+            });
+        })
     }
 
     function deleteSelected(comboBoxId, valToRemove)
@@ -280,7 +289,8 @@
         </tr>
         <tr>
             <td colspan="2" style="text-align:left; font-weight:bold; padding-top:20px;">
-                <span style="text-decoration:underline;cursor:pointer" onclick="toggleAdvanced()" id="toggleAdvanced">Show all annotations</span>
+                <span style="text-decoration:underline;cursor:pointer" id="toggleAdvanced">Show all annotations</span>
+                <% addHandler("toggleAdvanced", "click", "toggleAdvanced()"); %>
             </td>
         </tr>
         <tr id="annotationListAdvanced">

panoramapublic/src/org/labkey/panoramapublic/query/ExperimentAnnotationsTableInfo.java

@@ -57,13 +57,15 @@
 import org.labkey.api.settings.AppProps;
 import org.labkey.api.util.DOM;
 import org.labkey.api.util.HtmlString;
+import org.labkey.api.util.Link;
 import org.labkey.api.util.PageFlowUtil;
 import org.labkey.api.util.SimpleNamedObject;
 import org.labkey.api.util.StringExpressionFactory;
 import org.labkey.api.util.UniqueID;
 import org.labkey.api.view.ActionURL;
 import org.labkey.api.view.HttpView;
 import org.labkey.api.view.template.ClientDependency;
+import org.labkey.api.view.template.PageConfig;
 import org.labkey.panoramapublic.PanoramaPublicController;
 import org.labkey.panoramapublic.PanoramaPublicManager;
 import org.labkey.panoramapublic.PanoramaPublicSchema;
@@ -81,10 +83,10 @@
 
 import static org.labkey.api.util.DOM.Attribute.height;
 import static org.labkey.api.util.DOM.Attribute.href;
-import static org.labkey.api.util.DOM.Attribute.onclick;
 import static org.labkey.api.util.DOM.Attribute.src;
 import static org.labkey.api.util.DOM.Attribute.title;
 import static org.labkey.api.util.DOM.Attribute.width;
+import static org.labkey.api.util.DOM.DIV;
 import static org.labkey.api.util.DOM.IMG;
 import static org.labkey.api.util.DOM.at;
 
@@ -149,13 +151,16 @@ public void renderGridCellContents(RenderContext ctx, Writer out) throws IOExcep
                         if(id != null && container != null)
                         {
                             ActionURL detailsPage = PageFlowUtil.urlProvider(ProjectUrls.class).getBeginURL(container); // experiment container
-                            DOM.SPAN(at(onclick, "viewExperimentDetails(this,'" + container.getPath() + "', '" + id + "','" + detailsPage + "')")
+                            PageConfig pageConfig = HttpView.currentPageConfig();
+                            String spanId = pageConfig.makeId("expt_details_");
+                            DOM.SPAN(at(DOM.Attribute.id, spanId)
                                             .data("active", "false") // will be rendered as "data-active" attribute
                                             .data("loaded", "false"), // will be rendered as "data-loaded" attribute
                                     IMG(at(DOM.Attribute.id, "expandcontract-" + id)
                                             .at(src, PageFlowUtil.staticResourceUrl("_images/plus.gif"))),
                                     HtmlString.NBSP)
                                     .appendTo(out);
+                            pageConfig.addHandler(spanId, "click", "viewExperimentDetails(this,'" + container.getPath() + "', '" + id + "','" + detailsPage + "')");
                         }
                         super.renderGridCellContents(ctx, out);
                     }
@@ -204,11 +209,12 @@ public void renderGridCellContents(RenderContext ctx, Writer out) throws IOExcep
                 }
                 else
                 {
-                    String content = "<div><a class=\"button-small button-small-green\" style=\"margin:0px 5px 0px 2px;\""
-                                     + "href=\"\" onclick=\"showShareLink(this, '" + PageFlowUtil.filter(accessUrl) + "');return false;\""
-                               + ">Share</a>";
-                    content += "</div>";
-                    out.write(content);
+                    var link = new Link.LinkBuilder("Share")
+                            .clearClasses().addClass("button-small button-small-green")
+                            .style("margin:0px 5px 0px 2px;")
+                            .onClick("showShareLink(this, " + PageFlowUtil.jsString(accessUrl) + ");return false;");
+                    DIV(link.build()).appendTo(out);
+
                 }
             }
         });

panoramapublic/src/org/labkey/panoramapublic/view/expannotations/experimentDetails.jsp

@@ -292,7 +292,9 @@
     <div class="link">
        <strong><%=h(linkText)%>: </strong>
        <span id="accessUrl" style="margin-top:5px;"><a href="<%=h(accessUrl)%>"><%=h(accessUrl)%></a></span>
-       <a class="button-small button-small-green" style="margin:0px 5px 0px 2px;" href="" onclick="showShareLink(this, '<%=h(accessUrl)%>'); return false;">Share</a>
+        <%=link("Share").clearClasses().addClass("button-small button-small-green")
+                .style("margin:0px 5px 0px 2px")
+                .onClick("showShareLink(this, " + q(accessUrl) + "); return false;")%>
         <% if (annotDetails.hasVersion()) {%>
         <span class="link" id="publishedDataVersion" style="margin-left:10px;"><strong>Version: <span style="color:<%=h(annotDetails.isCurrentVersion() ? "green" : "red")%>;"><%=h(annotDetails.getVersion())%></span>
                 <% if (annotDetails.hasVersionsLink()) { %>

panoramapublic/src/org/labkey/panoramapublic/view/publish/pxValidationStatus.jsp

@@ -260,21 +260,27 @@
 
     function deleteModInfoLink(modInfoId, skylineModName, experimentAnnotationsId, modType, matchCount) {
         if (!modType) return;
-        const action = isStructuralModType(modType) ? 'deleteStructuralModInfo' : 'deleteIsotopeModInfo';
 
         const linkText = matchCount === 1 ? "Delete Match" : "Delete Matches";
-        return '<a class="labkey-text-link" style="margin-left:5px;" onClick="deleteModInfo(' + modInfoId + ',' + experimentAnnotationsId
-                + ', \'' + skylineModName + '\', \'' + action + '\');">' + linkText + '</a>';
+        const id = 'delete-assigned-unimod-id-' + Ext4.id();
+        const html = '<a id="' + id +'" href="#" class="labkey-text-link" style="margin-left:5px;" >' + linkText + '</a>';
+        const callback = () => {
+            const action = isStructuralModType(modType) ? 'deleteStructuralModInfo' : 'deleteIsotopeModInfo';
+            LABKEY.Utils.attachEventHandler(id, "click", function () {
+                return deleteModInfo(modInfoId, experimentAnnotationsId, skylineModName, action);
+            });
+        };
+        return {"html": html, "callback": callback }
     }
 
     function deleteModInfo(modInfoId, experimentAnnotationsId, skylineModName, action) {
-        const confirmMsg = "Are you sure you want to delete the saved Unimod information for modification " + skylineModName + "?";
+        const confirmMsg = "Are you sure you want to delete the saved Unimod information for modification '" + skylineModName + "'?";
         const params = {
             'id': experimentAnnotationsId,
             'modInfoId': modInfoId,
             'returnUrl': returnUrl
         };
-        var href = LABKEY.ActionURL.buildURL('panoramapublic', action, LABKEY.ActionURL.getContainer(), params);
+        const href = LABKEY.ActionURL.buildURL('panoramapublic', action, LABKEY.ActionURL.getContainer(), params);
         return LABKEY.Utils.confirmAndPost(confirmMsg, href);
     }
 
@@ -331,8 +337,14 @@
                                     sep = isotopic ? '</br>' : '<b> + </b>';
                                 }
                                 if (record.data['modInfoId']) {
-                                    ret += deleteModInfoLink(record.data['modInfoId'], record.data['skylineModName'],
+                                    const link = deleteModInfoLink(record.data['modInfoId'], record.data['skylineModName'],
                                             <%=experimentAnnotationsId%>, record.data['modType'], matches.length);
+                                    ret += link.html;
+                                    Ext4.defer(function()
+                                    {
+                                        // Attach the onclick handler in a deferred function so that it fires after the renderer function is executed.
+                                        link.callback();
+                                    }, 100);
                                 }
                                 return ret;
                             }

panoramapublic/src/org/labkey/panoramapublic/view/search/panoramaWebSearch.jsp

@@ -87,7 +87,8 @@
                     </td>
                     <td style="width: 25px"></td>
                     <td>
-                        <button id="clear-all-button-id-experiment" class="clear-all-button" onclick="clearInputFieldsAndResetURL('experiment');">Clear All</button>
+                        <button id="clear-all-button-id-experiment" class="clear-all-button">Clear All</button>
+                        <% addHandler("clear-all-button-id-experiment", "click", "clearInputFieldsAndResetURL('experiment')"); %>
                     </td>
                 </tr>
                 <tr>
@@ -114,7 +115,8 @@
 
                     <td style="width: 25px"></td>
                     <td>
-                        <button id="clear-all-button-id-protein" class="clear-all-button" onclick="clearInputFieldsAndResetURL('protein');">Clear All</button>
+                        <button id="clear-all-button-id-protein" class="clear-all-button">Clear All</button>
+                        <% addHandler("clear-all-button-id-protein", "click", "clearInputFieldsAndResetURL('protein')"); %>
                     </td>
                 </tr>
                 <tr style="height: 10px"></tr>
@@ -138,7 +140,8 @@
 
                     <td style="width: 25px"></td>
                     <td>
-                        <button id="clear-all-button-id-peptide" class="clear-all-button" onclick="clearInputFieldsAndResetURL('peptide');">Clear All</button>
+                        <button id="clear-all-button-id-peptide" class="clear-all-button">Clear All</button>
+                        <% addHandler("clear-all-button-id-peptide", "click", "clearInputFieldsAndResetURL('peptide')"); %>
                     </td>
                 </tr>
                 <tr style="height: 10px"></tr>
@@ -162,15 +165,17 @@
 
                     <td style="width: 25px"></td>
                     <td>
-                        <button id="clear-all-button-id-small-molecule" class="clear-all-button" onclick="clearInputFieldsAndResetURL('smallMolecule');">Clear All</button>
+                        <button id="clear-all-button-id-small-molecule" class="clear-all-button">Clear All</button>
+                        <% addHandler("clear-all-button-id-small-molecule", "click", "clearInputFieldsAndResetURL('smallMolecule')"); %>
                     </td>
                 </tr>
                 <tr style="height: 10px"></tr>
             </table>
         </div>
     </div>
     <div>
-        <button id="search-button-id" class="labkey-button" onclick="handleRendering('true');">Search</button>
+        <button id="search-button-id" class="labkey-button">Search</button>
+        <% addHandler("search-button-id", "click", "handleRendering('true')"); %>
     </div>
     <div id="search-criteria-id"/>
 

panoramapublic/src/org/labkey/panoramapublic/view/viewSlideshow.jsp

@@ -109,6 +109,6 @@
         </tr>
         </tbody>
     </table>
-    <button style="margin: 15px 0 20px 0" onclick="viewSlideshow()">View</button>
+    <%=button("View").style("margin:15px 0 20px 0").onClick("viewSlideshow()").build()%>
 </div>
 <div id="slideshowPlaceholder"></div>

panoramapublic/webapp/PanoramaPublic/js/slideshow.js

@@ -5,6 +5,7 @@
 let slideIndex;
 let slides, dots, text;
 let wait;
+const DOT_NAV_ID_PREFIX = "slideshow-dot-";
 
 function setDescSize(fixed)
 {
@@ -76,6 +77,17 @@ function addSlides(json)
             appendDot(slideshowDots, i + existingSlideCount + 1);
             appendText(entry, slideshowTexts);
         }
+
+        // Attach the 'onclick' event handlers
+        for(let i = 0; i < catalog.length; i++)
+        {
+            const index = i + existingSlideCount + 1;
+            const el = document.getElementById(DOT_NAV_ID_PREFIX + index);
+            if (el)
+            {
+                el.onclick = function() { currentSlide(index); };
+            }
+        }
         showSlides();
     }
     else
@@ -111,7 +123,7 @@ function appendDot(dotsContainer, index)
     const dot = document.createElement('span');
     const cls = index === 1 ? "dot active" : "dot";
     dot.setAttribute('class', cls);
-    dot.setAttribute('onclick', 'currentSlide(' + index + ')');
+    dot.setAttribute('id', DOT_NAV_ID_PREFIX + index);
     dotsContainer.appendChild(dot);
     dotsContainer.appendChild(document.createTextNode(" ") );
 }
@@ -178,6 +190,8 @@ function showSlides()
 
 function plusSlides(position)
 {
+    if (!slides) return;
+
     let i;
     setDescSize(true);
     slideIndex += position;
@@ -233,14 +247,17 @@ function appendSlidesContainer(parentDivId)
         return false;
     }
 
+    const nextSlideBtnId = "next-slide-btn";
+    const prevSlideBtnId = "prev-slide-btn";
+
     let slideshowHtml = '';
     slideshowHtml += '<div class="banner">' +
                      '<table style="width: 100%;"><tbody><tr><td height="100%" style="width: 100%">' +
                      '<table style="width: 100%;"><tbody><tr>' +
 
                      '<td height="100%"><div id="slides" style="width:100%;">' +
                      '<div class="slideshow-container">' +
-                     '<a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a>' +
+                     '<a class="prev" id="' + prevSlideBtnId + '">&#10094;</a> <a class="next" id="' + nextSlideBtnId + '">&#10095;</a>' +
                      '</div>' +
                      '<br/><div style="text-align:center" class="slideshow-dots"></div>' +
                      '</div></td>' +
@@ -259,5 +276,8 @@ function appendSlidesContainer(parentDivId)
                      '</div>';
 
     parentDiv.innerHTML = slideshowHtml;
+    document.getElementById(nextSlideBtnId).onclick = function() { plusSlides(-1); };
+    document.getElementById(prevSlideBtnId).onclick = function() { plusSlides(1); };
+
     return true;
 }