Skip to content

Commit

Permalink
Provided means to rearrange metadata columns' order
Browse files Browse the repository at this point in the history
  • Loading branch information
@GuilhemSempere
GuilhemSempere committed Oct 7, 2024
1 parent a964d6b commit 0f3c3d1
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 20 deletions.
13 changes: 13 additions & 0 deletions src/main/webapp/css/jquery-ui.min-1.12.1.css
View file

Large diffs are not rendered by default.

19 changes: 19 additions & 0 deletions src/main/webapp/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,25 @@ div#welcome {
margin: 0 auto;
}

#individualFilteringTable th.draggable {
cursor: move;
}

#individualFilteringTable {
width: 100%;
border-collapse: collapse;
}

#individualFilteringTable th, #individualFilteringTable td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

.dragging-helper, #individualFilteringTable th.highlight {
background-color: #ddd;
}

div#density, div#individualFiltering, div#manual, div#variantDetailPanel, div#fjBytesPanel, div#genomeBrowserPanel div#igvPanel {
overflow: hidden;
width: 99%;
Expand Down
87 changes: 73 additions & 14 deletions src/main/webapp/index.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon" />
<link type="text/css" rel="stylesheet" href="css/bootstrap-select.min.css ">
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/jquery-ui.min-1.12.1.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap-select.min.js"></script>
Expand All @@ -54,6 +55,7 @@
<script type="text/javascript" src="js/igv.min.js"></script>
<script type="text/javascript" src="js/IgvCsvSearchReader.js"></script>
<script type="text/javascript" src="js/ajax-bootstrap-select.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min-1.12.1.js"></script>
</head>

<body>
Expand Down Expand Up @@ -456,7 +458,7 @@ https://doi.org/10.1093/gigascience/giz051</pre>
<input class="btn btn-primary btn-sm" style="margin-left:150px;" type="button" value="Reset filters" onclick="resetDropDownFilterTable(document.getElementById('individualFilteringTable'));"/>
<label style="margin-left:20px;">Always reset filters before using this dialog <input type="checkbox" id="resetMetadataFiltersOnDialogShown" checked></label>
</div>
<table id="individualFilteringTable" style="width:98%;"></table>
<table id="individualFilteringTable" style="width:98%;" class="draggableColumnTable"></table>
</div>
</div>
</div>
Expand Down Expand Up @@ -729,7 +731,6 @@ https://doi.org/10.1093/gigascience/giz051</pre>
var searchCallSetsUrl = '<c:url value="<%=GigwaRestController.REST_PATH + Ga4ghRestController.BASE_URL + Ga4ghRestController.CALLSETS_SEARCH%>" />';
var snpclustEditionURL = '<c:url value="<%=GigwaRestController.REST_PATH + GigwaRestController.BASE_URL + GigwaRestController.snpclustEditionURL%>" />';
var downloadURL;
var callSetMetadataFields = [];
var gotMetaData = false;
var referenceNames;
var exportedIndividualCount = 0;
Expand Down Expand Up @@ -1303,18 +1304,24 @@ https://doi.org/10.1093/gigascience/giz051</pre>
gotMetaData = false;
// first pass to compile an exhaustive field list
var headers = new Array();
var callSetMetadataFields = null, gotMdFieldsFromLocalStorage = false;
try {
callSetMetadataFields = JSON.parse(localStorage.getItem($('#module').val() + idSep + $('#project').val() + "_mdFields"));
}
catch (ignored)
{}
if (callSetMetadataFields == null)
callSetMetadataFields = new Array();
for (var ind in callSetResponse) {
if (!gotMetaData && callSetResponse[ind].info != null && Object.keys(callSetResponse[ind].info).length > 0)
gotMetaData = true;
if (gotMetaData)
for (var key in callSetResponse[ind].info)
if (!headers.includes(key))
headers.push(key);
if (!callSetMetadataFields.includes(key))
callSetMetadataFields.push(key);
if (individualSubSet == null || $.inArray(callSetResponse[ind].name, individualSubSet) != -1)
indOpt.push(callSetResponse[ind].name);
}
callSetMetadataFields = headers;
var brapiBaseUrl = location.origin + '<c:url value="<%=GigwaRestController.REST_PATH %>" />/' + referenceset + '<%= BrapiRestController.URL_BASE_PREFIX %>';
$.ajax({
Expand Down Expand Up @@ -1345,20 +1352,72 @@ https://doi.org/10.1093/gigascience/giz051</pre>
});
setTimeout(function () {
var headerRow = new StringBuffer(), exportedMetadataSelectOptions = "";
headerRow.append("<tr valign='top'><td></td><th>Individual</th>");
for (var i in headers) {
headerRow.append("<th>" + headers[i] + "<br/></th>");
exportedMetadataSelectOptions += "<option selected>" + headers[i] + "</option>";
headerRow.append("<thead><tr valign='top'><td></td><th>Individual</th>");
for (var i in callSetMetadataFields) {
headerRow.append("<th class='draggable'><div>" + callSetMetadataFields[i] + "</div></th>");
exportedMetadataSelectOptions += "<option selected>" + callSetMetadataFields[i] + "</option>";
}
$("#exportedIndividualMetadata").html(exportedMetadataSelectOptions);
var ifTable = $("table#individualFilteringTable");
if (headerRow != "")
ifTable.prepend(headerRow + "</tr>");
var tableObj = document.getElementById("individualFilteringTable");
addSelectionDropDownsToHeaders(tableObj);
ifTable.prepend(headerRow + "</tr></thead>");
addSelectionDropDownsToHeaders(document.getElementById("individualFilteringTable"));
// Make the table headers draggable & droppable
ifTable.find("th.draggable").draggable({
helper: function() {
return $(this).clone().addClass("dragging-helper");
},
revert: true
}).droppable({
over: function(event, ui) {
$(this).addClass("highlight");
},
out: function(event, ui) {
$(this).removeClass("highlight");
},
drop: function(event, ui) {
var dropped = ui.draggable;
var droppedOn = $(this);
// Get the indices of the dropped and droppedOn elements
var droppedIndex = dropped.index();
var droppedOnIndex = droppedOn.index();
// Prevent moving before the first column or after the last column
if (droppedIndex === 0 && droppedOnIndex === 0) return;
var draggableColCount = ifTable.find("th.draggable").length;
if (droppedIndex === draggableColCount - 1 && droppedOnIndex === draggableColCount - 1) return;
// Move the header cell
if (droppedIndex < droppedOnIndex) {
dropped.insertAfter(droppedOn);
} else {
dropped.insertBefore(droppedOn);
}
// Move the corresponding cells in the body for all rows
ifTable.find("tbody tr").each(function() {
var cells = $(this).find("td");
var droppedCell = cells.eq(droppedIndex); // Get the dropped cell
var droppedOnCell = cells.eq(droppedOnIndex); // Get the dropped-on cell
if (droppedIndex < droppedOnIndex) {
droppedCell.insertAfter(droppedOnCell);
} else {
droppedCell.insertBefore(droppedOnCell);
}
});
// Remove the highlight class after drop
$(this).removeClass("highlight");
localStorage.setItem($('#module').val() + idSep + $('#project').val() + "_mdFields", JSON.stringify(ifTable.find("thead th:gt(0)").get().filter(t => !$(t).hasClass("dragging-helper")).map(t => $(t).find("div:eq(0)").text())));
}
});
$('#progress').modal('hide');
displayMessage(dbDesc + "<p class='margin-top'><img src='images/brapi16.png' /> BrAPI baseURL: <a href='" + brapiBaseUrl + "' target=_blank>" + brapiBaseUrl + "</a></p>");
}, 1);
Expand Down
13 changes: 13 additions & 0 deletions src/main/webapp/js/jquery-ui.min-1.12.1.js
View file

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions src/main/webapp/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -735,9 +735,10 @@ function addSelectionDropDownsToHeaders(tableObj)
let colsToIgnore = [];
for (c=2; c<columnCount; c++) {
distinctValuesForColumn = jsonResult[tableObj.rows[0].cells[c].innerText];
if (distinctValuesForColumn.length <= 1) {
if (distinctValuesForColumn == null || distinctValuesForColumn.length <= 1) {
colsToIgnore.push(c - 1 - colsToIgnore.length);
console.log("Ignoring metadata field filter because it contains less than 2 values: " + tableObj.rows[0].cells[c].innerText);
console.log("Ignoring metadata field filter because it " + (distinctValuesForColumn == null ? "is empty" : "contains less than 2 values") + ": " + tableObj.rows[0].cells[c].innerText);
continue;
}

distinctValuesForColumn.sort();
Expand Down Expand Up @@ -779,12 +780,11 @@ function applyDropDownFiltersToTable(tableObj, reset)
var headers = [];
var filters = {};
for (var i = 2; i < tableObj.rows[0].cells.length; i++) {
var selectElement = tableObj.rows[0].cells[i].querySelector('select');
var columnName = tableObj.rows[0].cells[i].innerHTML.split('<')[0]
var columnName = $(tableObj.rows[0].cells[i]).find("div:eq(0)").text();
headers.push(columnName);
var values = [];
if (!reset) { // if resetting we ingore filter contents because dropdowns are being reset synchronouusly
var selectedOptions = selectElement.selectedOptions;
if (!reset) { // if resetting we ignore filter contents because dropdowns are being reset synchronouusly
var selectedOptions = tableObj.rows[0].cells[i].querySelector('select').selectedOptions;
for (var j = 0; j < selectedOptions.length; j++)
values.push(selectedOptions[j].value);
}
Expand Down

0 comments on commit 0f3c3d1

Please sign in to comment.