Skip to content

Commit 6a5b53b

Browse files
vagishavagisha
committed
Fix Update button not visible when chromatograms chart display settings form is expanded
- Replaced fixed height (160px) with autoHeight for proper sizing. - Create form when "Display Chart Settings" is expanded (not on page load) to ensure proper rendering in a visible container.
1 parent b656d2d commit 6a5b53b

1 file changed

Lines changed: 79 additions & 51 deletions

File tree

‎src/org/labkey/targetedms/view/chromatogramsForm.jsp‎

Lines changed: 79 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,17 @@
123123
]
124124
});
125125
126+
// Don't create form here - it will be created when the container is shown
127+
128+
});
129+
130+
function createForm()
131+
{
132+
if (form)
133+
{
134+
return; // Form already exists
135+
}
136+
126137
// syncMargin is the negative margin-left of the syncX and syncY fields. If the filters are not being displayed
127138
// the sync fields slide under the width/height fields.
128139
var syncMargin;
@@ -141,7 +152,7 @@
141152
name: 'chromForm',
142153
border: false, frame: false,
143154
width:550,
144-
height: 160,
155+
autoHeight: true, // Don't set a fixed height. Use autoHeight to allow the ExtJS form to automatically size itself to fit all content
145156
defaults: {
146157
labelWidth: 150,
147158
labelHeight: 23,
@@ -277,9 +288,20 @@
277288
],
278289
});
279290
291+
// Initialize form after creation
292+
setupFormHandlers();
293+
setInitialValues();
294+
hideFieldsNotNeeded();
295+
}
296+
297+
function setupFormHandlers()
298+
{
280299
document.getElementById("clear-rep")['onclick'] = clearReplicates;
281300
document.getElementById("clear-annot")['onclick'] = clearAnnotations;
301+
}
282302
303+
function setInitialValues()
304+
{
283305
// This has to happen after form is rendered.
284306
form.getForm().findField("annotationsFilter").setValue(selectedAnnotationsFilterList);
285307
for(var i = 0; i < selectedAnnotationsFilterList.length; i++)
@@ -309,7 +331,10 @@
309331
}
310332
}
311333
manageFilterListVisibility();
334+
}
312335
336+
function hideFieldsNotNeeded()
337+
{
313338
// Hides multi-select combo boxes if there is only one or zero values in its value store.
314339
<%if(replicatesList.size() <= 1){%>
315340
form.getForm().findField("replicatesFilter").hide();
@@ -321,82 +346,82 @@
321346
form.getForm().findField("hideAnnotations").hide();
322347
hiddenFields++;
323348
<%}%>
349+
}
324350
325-
// appendFilterItem adds a filter table row & column to the appropriate parent filter box.
326-
function appendFilterItem(element, displayValue, parentTable, id) {
327-
if(displayValue != null) {
328-
let deleteIconId = 'delete-' + id;
329-
let newRowContent = "<tr id=\""+LABKEY.Utils.encodeHtml(id)+"\"><td class=\"item\"><img id=\""+LABKEY.Utils.encodeHtml(deleteIconId)+"\" src='<%=getWebappURL("_images/delete.png")%>' style='width:10px; height:10px; margin-right:3px;'>"+LABKEY.Utils.encodeHtml(displayValue)+"</td></tr>";
330-
element.append(newRowContent);
351+
// appendFilterItem adds a filter table row & column to the appropriate parent filter box.
352+
function appendFilterItem(element, displayValue, parentTable, id) {
353+
if(displayValue != null) {
354+
let deleteIconId = 'delete-' + id;
355+
let newRowContent = "<tr id=\""+LABKEY.Utils.encodeHtml(id)+"\"><td class=\"item\"><img id=\""+LABKEY.Utils.encodeHtml(deleteIconId)+"\" src='<%=getWebappURL("_images/delete.png")%>' style='width:10px; height:10px; margin-right:3px;'>"+LABKEY.Utils.encodeHtml(displayValue)+"</td></tr>";
356+
element.append(newRowContent);
331357
332-
document.getElementById(deleteIconId).addEventListener('click', function() {
333-
deleteFilter(this, parentTable);
334-
});
335-
}
358+
document.getElementById(deleteIconId).addEventListener('click', function() {
359+
deleteFilter(this, parentTable);
360+
});
336361
}
362+
}
337363
338-
// modifyFilter is triggered when user modifies selection through the combobox and will add/remove items from the list based on a newValue and an oldValue.
339-
function modifyFilter(newValues, oldValues, parentId)
364+
// modifyFilter is triggered when user modifies selection through the combobox and will add/remove items from the list based on a newValue and an oldValue.
365+
function modifyFilter(newValues, oldValues, parentId)
366+
{
367+
if(newValues !=null && oldValues !=null)
340368
{
341-
if(newValues !=null && oldValues !=null)
369+
if(newValues.length >= oldValues.length)
342370
{
343-
if(newValues.length >= oldValues.length)
371+
for (var i = 0; i < newValues.length; i++)
344372
{
345-
for (var i = 0; i < newValues.length; i++)
373+
if(oldValues.indexOf(newValues[i]) === -1)
346374
{
347-
if(oldValues.indexOf(newValues[i]) === -1)
375+
var val;
376+
var id;
377+
if(parentId === "replicateFilters")
348378
{
349-
var val;
350-
var id;
351-
if(parentId === "replicateFilters")
379+
for(var a = 0; a < replicateStore.getCount(); a++)
352380
{
353-
for(var a = 0; a < replicateStore.getCount(); a++)
381+
if(replicateStore.data.items[a].data.replicateId === newValues[i])
354382
{
355-
if(replicateStore.data.items[a].data.replicateId === newValues[i])
356-
{
357-
val = replicateStore.data.items[a].data.replicateName;
358-
id = replicateStore.data.items[a].data.replicateId;
359-
}
383+
val = replicateStore.data.items[a].data.replicateName;
384+
id = replicateStore.data.items[a].data.replicateId;
360385
}
361386
}
362-
else
363-
{
364-
val = newValues[i];
365-
id = newValues[i];
366-
}
367-
appendFilterItem($('#'+parentId+''), val, parentId, id);
368387
}
388+
else
389+
{
390+
val = newValues[i];
391+
id = newValues[i];
392+
}
393+
appendFilterItem($('#'+parentId+''), val, parentId, id);
369394
}
370395
}
371-
else if(newValues.length < oldValues.length)
372-
{
373-
for (var j = 0; j < oldValues.length; j++) {
374-
if(newValues.indexOf(oldValues[j]) === -1)
396+
}
397+
else if(newValues.length < oldValues.length)
398+
{
399+
for (var j = 0; j < oldValues.length; j++) {
400+
if(newValues.indexOf(oldValues[j]) === -1)
401+
{
402+
var textValue = oldValues[j];
403+
if(parentId === "replicateFilters")
375404
{
376-
var textValue = oldValues[j];
377-
if(parentId === "replicateFilters")
405+
for(var a = 0; a < replicateStore.getCount(); a++)
378406
{
379-
for(var a = 0; a < replicateStore.getCount(); a++)
407+
if(replicateStore.data.items[a].data.replicateId === oldValues[j])
380408
{
381-
if(replicateStore.data.items[a].data.replicateId === oldValues[j])
382-
{
383-
textValue = replicateStore.data.items[a].data.replicateName;
384-
}
409+
textValue = replicateStore.data.items[a].data.replicateName;
385410
}
386411
}
387-
var el = findByText(document.getElementById("allFilters"), textValue);
388-
var $el = $(el);
389-
if(null != el)
390-
{
412+
}
413+
var el = findByText(document.getElementById("allFilters"), textValue);
414+
var $el = $(el);
415+
if(null != el)
416+
{
391417
$el.closest('tr').remove();
392-
}
393418
}
394419
}
395420
}
396421
}
397-
manageFilterListVisibility();
398422
}
399-
});
423+
manageFilterListVisibility();
424+
}
400425
401426
// Finds element that contains text value. Searches all children of node.
402427
function findByText(node, text) {
@@ -485,6 +510,9 @@
485510
$('#showGraphImg').attr('src', <%= q(getWebappURL("/_images/minus.gif")) %>);
486511
$('#formContainer').show();
487512
$('#allFilters').show();
513+
514+
// Create the form after the container is visible
515+
createForm();
488516
}
489517
else
490518
{
@@ -498,7 +526,7 @@
498526
<div id="headContainer">
499527
<% addHandler("showChartHeadContainer", "click", "showChart()"); %>
500528
<div id="showChartHeadContainer" style="margin-bottom: 10px;"><img id="showGraphImg" src="<%=getWebappURL("_images/plus.gif")%>"> <strong>Display Chart Settings</strong></div>
501-
<div id="formContainer" style="float:left; width:550px; height: 160px; padding-bottom: 25px; display: none;"></div>
529+
<div id="formContainer" style="float:left; width:550px; padding-bottom: 25px; display: none;"></div>
502530
<div id="allFilters" style="float:left; display: none;">
503531

504532
<div style="float:left;" class="chrom_title_box" id="reptitle" >

0 commit comments

Comments
 (0)