Skip to content

Commit 70ac24d

Browse files
vagishavagisha
committed
Migrate inline event handlers from LincsDataTable and custom GCT form.
1 parent 9dcffb1 commit 70ac24d

4 files changed

Lines changed: 87 additions & 42 deletions

File tree

‎lincs/resources/web/lincs/lincs.js‎

Lines changed: 49 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,61 @@
33
*
44
* Licensed under the Apache License, Version 2.0: http://www.apache.org/licenses/LICENSE-2.0
55
*/
6-
function externalHeatmapViewerLink(container, fileName, elementId, assayType)
6+
function externalHeatmapViewerLink(fileUrl, fileName, elementId, assayType, addAnalyticsTracking)
77
{
8-
var fileUrl= LABKEY.ActionURL.buildURL("_webdav", "REMOVE", container + '/@files/GCT/' + fileName);
9-
fileUrl= fileUrl.substring(0, fileUrl.indexOf("/REMOVE"));
10-
fileUrl= LABKEY.ActionURL.getBaseURL(true) + fileUrl;
11-
// console.log("File URL is " + fileUrl);
12-
13-
var morpheusUrl = getMorpheusUrl(fileUrl, assayType);
14-
15-
var analyticsEvt = " onclick=\"try {_gaq.push(['_trackEvent', 'Lincs', 'Morpheus', '" + fileName + "']);} catch (err) {} try {gtag.event('Lincs', {eventAction: 'Morpheus', fileName: '" + fileName + "'});} catch (err) {}\" ";
8+
const morpheusUrl = getMorpheusUrl(fileUrl, assayType);
169

1710
Ext4.Ajax.request({
1811
url: fileUrl,
1912
method: 'HEAD',
2013
success: function(response, opts) {
21-
var imgUrl = LABKEY.ActionURL.getContextPath() + "/lincs/GENE-E_icon.png";
22-
Ext4.get(elementId).dom.innerHTML = '(<a target="_blank" ' + analyticsEvt + 'href="' + morpheusUrl + '">View in Morpheus</a> <img src=' + imgUrl + ' width="13", height="13"/>)';
14+
const imgUrl = LABKEY.ActionURL.getContextPath() + "/lincs/GENE-E_icon.png";
15+
16+
const targetElement = Ext4.get(elementId);
17+
if (!targetElement) {
18+
console.error('Element with Id not found:', elementId);
19+
return;
20+
}
21+
22+
// Create link element
23+
const link = document.createElement('a');
24+
link.href = morpheusUrl;
25+
link.target = '_blank';
26+
link.textContent = 'View in Morpheus ';
27+
28+
// Create image element
29+
const img = document.createElement('img');
30+
img.src = imgUrl;
31+
img.width = 13;
32+
img.height = 13;
33+
img.alt = 'GENE-E icon';
34+
35+
link.appendChild(img);
36+
37+
const wrapper = document.createElement('span');
38+
wrapper.appendChild(document.createTextNode('['));
39+
wrapper.appendChild(link);
40+
wrapper.appendChild(document.createTextNode(']'));
41+
42+
targetElement.dom.appendChild(wrapper);
43+
44+
if (addAnalyticsTracking)
45+
{
46+
// Attach the event handler
47+
link['onclick'] = function () {
48+
try
49+
{
50+
gtag('event', 'Lincs', {
51+
eventAction: 'Morpheus',
52+
fileName: fileName
53+
});
54+
}
55+
catch (err)
56+
{
57+
console.warn('Failed to track Morpheus click:', err);
58+
}
59+
};
60+
}
2361
},
2462
failure: function(response, opts) {
2563
console.log('server-side failure with status code ' + response.status);

‎lincs/src/org/labkey/lincs/LincsDataTable.java‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@
2929
import org.labkey.api.query.FilteredTable;
3030
import org.labkey.api.query.UserSchema;
3131
import org.labkey.api.settings.AppProps;
32+
import org.labkey.api.util.DOM;
33+
import org.labkey.api.util.DOM.Renderable;
3234
import org.labkey.api.util.FileUtil;
3335
import org.labkey.api.util.HtmlString;
3436
import org.labkey.api.util.LinkBuilder;
@@ -45,7 +47,11 @@
4547
import java.util.regex.Matcher;
4648
import java.util.regex.Pattern;
4749

50+
import static org.labkey.api.util.DOM.Attribute.height;
51+
import static org.labkey.api.util.DOM.Attribute.src;
4852
import static org.labkey.api.util.DOM.Attribute.style;
53+
import static org.labkey.api.util.DOM.Attribute.width;
54+
import static org.labkey.api.util.DOM.IMG;
4955
import static org.labkey.api.util.DOM.SPAN;
5056
import static org.labkey.api.util.DOM.at;
5157

@@ -288,28 +294,35 @@ private String getAnalyticsScript(String eventAction, String fileName, boolean a
288294
// request if the download opens on the same page.
289295
String timeout = addWaitTime ? "that=this; setTimeout(function(){location.href=that.href;},400);return false;" : "";
290296

291-
// Universal Analytics - remove after conversion to GA4 is complete
292-
String onClickScript = "try {_gaq.push(['_trackEvent', 'Lincs', " + PageFlowUtil.qh(eventAction) + ", " + PageFlowUtil.qh(fileName) + "]); } catch (err) {}";
293297
// GA4 variant
294-
onClickScript += "try {gtag('event', 'Lincs', {eventAction: " + PageFlowUtil.qh(eventAction) + ", fileName: " + PageFlowUtil.qh(fileName) + "}); } catch(err) {}";
298+
String onClickScript = "try {gtag('event', 'Lincs', {eventAction: " + PageFlowUtil.qh(eventAction) + ", fileName: " + PageFlowUtil.qh(fileName) + "}); } catch(err) {}";
295299
onClickScript += timeout;
296300
return onClickScript;
297301
}
298302
return null;
299303
}
300304

301-
private HtmlString externalHeatmapViewerLink(String fileName, LincsModule.LincsAssay assayType)
305+
private Renderable externalHeatmapViewerLink(String fileName, LincsModule.LincsAssay assayType)
302306
{
303307
String gctFileUrl = davUrl + "GCT/" + PageFlowUtil.encodePath(fileName);
304308
String morpheusUrl = getMorpheusUrl(gctFileUrl, assayType);
305309

306310
String analyticsScript = getAnalyticsScript("Morpheus", fileName, false);
307-
String onclickEvt = StringUtils.isBlank(analyticsScript) ? "" : "onclick=\"" + analyticsScript + "\"";
308311

309312
String imgUrl = AppProps.getInstance().getContextPath() + "/lincs/GENE-E_icon.png";
310313

311-
// TODO: Should use a LinkBuilder, etc.
312-
return HtmlString.unsafe("[&nbsp;<a target=\"_blank\" " + onclickEvt + " href=\"" + morpheusUrl + "\">View in Morpheus</a> <img src=" + imgUrl + " width=\"13\", height=\"13\"/>&nbsp;]");
314+
LinkBuilder viewInMorpheusLink = LinkBuilder.simpleLink("View in Morpheus", morpheusUrl).target("_blank");
315+
if (analyticsScript != null)
316+
{
317+
viewInMorpheusLink.onClick(analyticsScript);
318+
}
319+
320+
return DOM.SPAN("[",
321+
HtmlString.NBSP,
322+
viewInMorpheusLink,
323+
IMG(at(src, imgUrl).at(width, 13).at(height, 13)),
324+
HtmlString.NBSP,
325+
"]");
313326
}
314327

315328
private String getMorpheusUrl(String gctFileUrl, LincsModule.LincsAssay assayType)
@@ -365,12 +378,12 @@ public void renderGridCellContents(RenderContext ctx, HtmlWriter out)
365378

366379
String actionName = (getLevel() == LincsModule.LincsLevel.Config) ? "DownloadConfig" : "DownloadGCT";
367380
String analyticsScript = getAnalyticsScript(actionName, downloadFileName, true);
368-
HtmlString morpheusUrl = externalHeatmapViewerLink(downloadFileName, getAssayType(), getLevel());
381+
Renderable morpheusUrl = externalHeatmapViewerLink(downloadFileName, getAssayType(), getLevel());
369382
String downloadText = (getLevel() == LincsModule.LincsLevel.Config) ? "CFG" : "GCT";
370383
renderGridCell(out, analyticsScript, getGctDavUrlUnencoded(downloadFileName), downloadText, morpheusUrl);
371384
}
372385

373-
private void renderGridCell(HtmlWriter out, String analyticsScript, String downloadUrl, String downloadText, HtmlString morpheusUrl)
386+
private void renderGridCell(HtmlWriter out, String analyticsScript, String downloadUrl, String downloadText, Renderable morpheusUrl)
374387
{
375388
// <span style="white-space: nowrap;"> is recommended instead of deprecated <nobr></nobr>
376389
SPAN(
@@ -408,7 +421,7 @@ private boolean fileAvailable(Integer runId, String downloadFileName)
408421
}
409422
}
410423

411-
@Nullable HtmlString externalHeatmapViewerLink(String fileName, LincsModule.LincsAssay assayType, LincsModule.LincsLevel level)
424+
@Nullable Renderable externalHeatmapViewerLink(String fileName, LincsModule.LincsAssay assayType, LincsModule.LincsLevel level)
412425
{
413426
if(level == LincsModule.LincsLevel.Config)
414427
{

‎lincs/src/org/labkey/lincs/view/downloadCustomGCT.jsp‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@
2626
<%@ page import="org.labkey.lincs.LincsController.SelectedAnnotation" %>
2727
<%@ page import="java.util.List" %>
2828
<%@ page import="java.util.stream.Collectors" %>
29+
<%@ page import="org.labkey.api.files.FileContentService" %>
30+
<%@ page import="java.net.URI" %>
31+
<%@ page import="org.apache.commons.lang3.StringUtils" %>
32+
<%@ page import="org.labkey.api.analytics.AnalyticsService" %>
2933
<%@ page extends="org.labkey.api.jsp.JspBase" %>
3034
<%@ taglib prefix="labkey" uri="http://www.labkey.org/taglib" %>
3135
<labkey:errors/>
@@ -35,6 +39,8 @@
3539
public void addClientDependencies(ClientDependencies dependencies)
3640
{
3741
dependencies.add("Ext4");
42+
dependencies.add("/lincs/lincs.css");
43+
dependencies.add("/lincs/lincs.js");
3844
}
3945
%>
4046
<%
@@ -46,21 +52,21 @@
4652
ActionURL downloadGctUrl = urlFor(DownloadCustomGCTReportAction.class);
4753
String fileName = FileUtil.getFileName(gctBean.getGctFile());
4854
downloadGctUrl.addParameter("fileName", fileName);
55+
56+
URI webDavUri = FileContentService.get().getWebDavUrl(gctBean.getGctFile(), getContainer(), FileContentService.PathType.full);
57+
boolean hasAnalyticsTrackingScript = !StringUtils.isBlank(AnalyticsService.getTrackingScript());
4958
%>
5059

5160
<script type="text/javascript" nonce="<%=getScriptNonce()%>">
5261
53-
LABKEY.requiresCss("/lincs/lincs.css");
54-
LABKEY.requiresScript("/lincs/lincs.js");
55-
5662
// Initialize
5763
Ext4.onReady(init);
5864
function init()
5965
{
60-
var container = LABKEY.ActionURL.getContainer();
61-
var assayType = container.indexOf("P100") !== -1 ? "P100" : "GCP";
66+
const container = LABKEY.ActionURL.getContainer();
67+
const assayType = container.indexOf("P100") !== -1 ? "P100" : "GCP";
6268
console.log("Initializing for <%=h(fileName)%>");
63-
var morpheusUrl = externalHeatmapViewerLink(container, '<%=h(fileName)%>', "morpheusLink", assayType);
69+
const morpheusUrl = externalHeatmapViewerLink(<%=qh(webDavUri.toString())%>, <%=qh(fileName)%>, "morpheusLink", assayType, <%=hasAnalyticsTrackingScript%>);
6470
console.log("Morpheus URL: " + morpheusUrl);
6571
}
6672

‎panoramapublic/webapp/PanoramaPublic/js/slideshow.js‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -78,16 +78,6 @@ function addSlides(json)
7878
appendText(entry, slideshowTexts);
7979
}
8080

81-
// Attach the 'onclick' event handlers
82-
for(let i = 0; i < catalog.length; i++)
83-
{
84-
const index = i + existingSlideCount + 1;
85-
const el = document.getElementById(DOT_NAV_ID_PREFIX + index);
86-
if (el)
87-
{
88-
el.onclick = function() { currentSlide(index); };
89-
}
90-
}
9181
showSlides();
9282
}
9383
else
@@ -117,13 +107,11 @@ function appendCoverSlide(entry, coverslideContainer)
117107

118108
function appendDot(dotsContainer, index)
119109
{
120-
// Examples:
121-
// <span class="dot active" onclick="currentSlide(1)"></span>
122-
// <span class="dot" onclick="currentSlide(2)"></span>
123110
const dot = document.createElement('span');
124111
const cls = index === 1 ? "dot active" : "dot";
125112
dot.setAttribute('class', cls);
126113
dot.setAttribute('id', DOT_NAV_ID_PREFIX + index);
114+
dot['onclick'] = function(){ currentSlide(index); }; // CSP-compliant
127115
dotsContainer.appendChild(dot);
128116
dotsContainer.appendChild(document.createTextNode(" ") );
129117
}
@@ -276,8 +264,8 @@ function appendSlidesContainer(parentDivId)
276264
'</div>';
277265

278266
parentDiv.innerHTML = slideshowHtml;
279-
document.getElementById(nextSlideBtnId).onclick = function() { plusSlides(-1); };
280-
document.getElementById(prevSlideBtnId).onclick = function() { plusSlides(1); };
267+
document.getElementById(nextSlideBtnId)['onclick'] = function() { plusSlides(-1); };
268+
document.getElementById(prevSlideBtnId)['onclick'] = function() { plusSlides(1); };
281269

282270
return true;
283271
}

0 commit comments

Comments
 (0)