Skip to content

Migrate inline event handlers from LincsDataTable and custom GCT form #556

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vagisha merged 4 commits into from
Jul 22, 2025
Merged

Migrate inline event handlers from LincsDataTable and custom GCT form #556

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
70ac24d
Migrate inline event handlers from LincsDataTable and custom GCT form.
vagisha Jul 18, 2025
37f8e49
- Deleted lincs.js. downloadCustomGCT.jsp uses morpheus viewer link g…
vagisha Jul 21, 2025
0dbed89
Moved externalHeatmapViewerLink() back to GCTColumnPSP.
vagisha Jul 21, 2025
4b0c841
Removed Ext4 dependency
vagisha Jul 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 0 additions & 50 deletions lincs/resources/web/lincs/lincs.js
View file
Open in desktop

This file was deleted.

39 changes: 28 additions & 11 deletions lincs/src/org/labkey/lincs/LincsDataTable.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
import org.labkey.api.query.FilteredTable;
import org.labkey.api.query.UserSchema;
import org.labkey.api.settings.AppProps;
import org.labkey.api.util.DOM;
import org.labkey.api.util.FileUtil;
import org.labkey.api.util.HtmlString;
import org.labkey.api.util.LinkBuilder;
Expand All @@ -45,7 +46,11 @@
import java.util.regex.Matcher;
import java.util.regex.Pattern;

import static org.labkey.api.util.DOM.Attribute.height;
import static org.labkey.api.util.DOM.Attribute.src;
import static org.labkey.api.util.DOM.Attribute.style;
import static org.labkey.api.util.DOM.Attribute.width;
import static org.labkey.api.util.DOM.IMG;
import static org.labkey.api.util.DOM.SPAN;
import static org.labkey.api.util.DOM.at;

Expand Down Expand Up @@ -278,7 +283,12 @@ public boolean isSortable()
return false;
}

private String getAnalyticsScript(String eventAction, String fileName, boolean addWaitTime)
private HtmlString externalHeatmapViewerLink(String fileName, LincsModule.LincsAssay assayType)
{
return externalHeatmapViewerLink(fileName, assayType, getGctDavUrl(fileName));
}

private static String getAnalyticsScript(String eventAction, String fileName, boolean addWaitTime)
{
if (!StringUtils.isBlank(AnalyticsService.getTrackingScript()))
{
Expand All @@ -288,31 +298,38 @@ private String getAnalyticsScript(String eventAction, String fileName, boolean a
// request if the download opens on the same page.
String timeout = addWaitTime ? "that=this; setTimeout(function(){location.href=that.href;},400);return false;" : "";

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

private HtmlString externalHeatmapViewerLink(String fileName, LincsModule.LincsAssay assayType)
public static HtmlString externalHeatmapViewerLink(String fileName, LincsModule.LincsAssay assayType, String gctFileDavUrl)
{
String gctFileUrl = davUrl + "GCT/" + PageFlowUtil.encodePath(fileName);
String morpheusUrl = getMorpheusUrl(gctFileUrl, assayType);
String morpheusUrl = getMorpheusUrl(gctFileDavUrl, assayType);

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

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

// TODO: Should use a LinkBuilder, etc.
return HtmlString.unsafe("[&nbsp;<a target=\"_blank\" " + onclickEvt + " href=\"" + morpheusUrl + "\">View in Morpheus</a> <img src=" + imgUrl + " width=\"13\", height=\"13\"/>&nbsp;]");
LinkBuilder viewInMorpheusLink = LinkBuilder.simpleLink("View in Morpheus", morpheusUrl).target("_blank");
if (analyticsScript != null)
{
viewInMorpheusLink.onClick(analyticsScript);
}

return HtmlString.of(DOM.SPAN("[",
HtmlString.NBSP,
viewInMorpheusLink,
HtmlString.NBSP,
IMG(at(src, imgUrl).at(width, 13).at(height, 13)),
HtmlString.NBSP,
"]"));
}

private String getMorpheusUrl(String gctFileUrl, LincsModule.LincsAssay assayType)
private static String getMorpheusUrl(String gctFileUrl, LincsModule.LincsAssay assayType)
{
String morpheusJson = "{\"dataset\":\"" + gctFileUrl + "\",";
if(assayType == LincsModule.LincsAssay.P100)
Expand Down
35 changes: 13 additions & 22 deletions lincs/src/org/labkey/lincs/view/downloadCustomGCT.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,12 @@
<%@ page import="org.labkey.lincs.LincsController.SelectedAnnotation" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.stream.Collectors" %>
<%@ page import="org.labkey.api.files.FileContentService" %>
<%@ page import="java.net.URI" %>
<%@ page import="org.labkey.lincs.LincsController" %>
<%@ page import="org.labkey.lincs.LincsModule.LincsAssay" %>
<%@ page import="org.labkey.api.util.HtmlString" %>
<%@ page import="org.labkey.lincs.LincsDataTable.GctColumnPSP" %>
<%@ page extends="org.labkey.api.jsp.JspBase" %>
<%@ taglib prefix="labkey" uri="http://www.labkey.org/taglib" %>
<labkey:errors/>
Expand All @@ -34,7 +40,7 @@
@Override
public void addClientDependencies(ClientDependencies dependencies)
{
dependencies.add("Ext4");
dependencies.add("/lincs/lincs.css");
}
%>
<%
Expand All @@ -46,31 +52,15 @@
ActionURL downloadGctUrl = urlFor(DownloadCustomGCTReportAction.class);
String fileName = FileUtil.getFileName(gctBean.getGctFile());
downloadGctUrl.addParameter("fileName", fileName);
%>

<script type="text/javascript" nonce="<%=getScriptNonce()%>">

LABKEY.requiresCss("/lincs/lincs.css");
LABKEY.requiresScript("/lincs/lincs.js");

// Initialize
Ext4.onReady(init);
function init()
{
var container = LABKEY.ActionURL.getContainer();
var assayType = container.indexOf("P100") !== -1 ? "P100" : "GCP";
console.log("Initializing for <%=h(fileName)%>");
var morpheusUrl = externalHeatmapViewerLink(container, '<%=h(fileName)%>', "morpheusLink", assayType);
console.log("Morpheus URL: " + morpheusUrl);
}

</script>


URI webDavUri = FileContentService.get().getWebDavUrl(gctBean.getGctFile(), getContainer(), FileContentService.PathType.full);
LincsAssay assayType = LincsController.getLincsAssayType(getContainer());
HtmlString morpheusViewerLink = GctColumnPSP.externalHeatmapViewerLink(fileName, assayType, webDavUri.toString());
%>

<div style="margin:20px 10px 20px 10px">
<span style="font-weight:bold;"><a href="<%=h(downloadGctUrl)%>">[Download GCT]</a></span>
<span style="font-weight:bold;" id="morpheusLink"></span>
<span style="font-weight:bold;" id="morpheusLink"><%=morpheusViewerLink%></span>
<div style="color:red; margin-bottom:20px;">NOTE: The file will be deleted from the server after it is downloaded.</div>

<div style="margin:20px 10px 20px 10px">
Expand All @@ -92,4 +82,5 @@
<div># Replicates: <%=gctBean.getReplicateCount()%></div>
<div># Probe Annotations: <%=gctBean.getProbeAnnotationCount()%></div>
<div># Replicate Annotations: <%=gctBean.getReplicateAnnotationCount()%></div>
</div>
</div>
18 changes: 3 additions & 15 deletions panoramapublic/webapp/PanoramaPublic/js/slideshow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,16 +78,6 @@ function addSlides(json)
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
Expand Down Expand Up @@ -117,13 +107,11 @@ function appendCoverSlide(entry, coverslideContainer)

function appendDot(dotsContainer, index)
{
// Examples:
// <span class="dot active" onclick="currentSlide(1)"></span>
// <span class="dot" onclick="currentSlide(2)"></span>
const dot = document.createElement('span');
const cls = index === 1 ? "dot active" : "dot";
dot.setAttribute('class', cls);
dot.setAttribute('id', DOT_NAV_ID_PREFIX + index);
dot['onclick'] = function(){ currentSlide(index); }; // CSP-compliant
dotsContainer.appendChild(dot);
dotsContainer.appendChild(document.createTextNode(" ") );
}
Expand Down Expand Up @@ -276,8 +264,8 @@ function appendSlidesContainer(parentDivId)
'</div>';

parentDiv.innerHTML = slideshowHtml;
document.getElementById(nextSlideBtnId).onclick = function() { plusSlides(-1); };
document.getElementById(prevSlideBtnId).onclick = function() { plusSlides(1); };
document.getElementById(nextSlideBtnId)['onclick'] = function() { plusSlides(-1); };
Copy link
Contributor

@labkey-jeckels labkey-jeckels Jul 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change fine but I don't think should make any difference for CSP purposes. Were you seeing something different?

Copy link
Collaborator Author

@vagisha vagisha Jul 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, just following LabKey convention based on a comment in PR #412

document.getElementById(prevSlideBtnId)['onclick'] = function() { plusSlides(1); };

return true;
}