Skip to content

Initial pass at using ag-grid for client side pagination #9

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

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Initial pass at using ag-grid for client side pagination #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
16c9aff
Initial pass at using ag-grid for client side pagination
Oct 26, 2020
6e6aba6
Fix Pagination
Oct 26, 2020
a103daa
Add column resizing
Oct 27, 2020
6a44cda
Formatting fixes
Oct 27, 2020
8dbceef
Change to JsonObject so descriptions get escaped
Oct 30, 2020
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
85 changes: 54 additions & 31 deletions api/src/main/java/datawave/webservice/results/datadictionary/DefaultDataDictionary.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
import javax.xml.bind.annotation.XmlTransient;

import com.google.common.collect.Lists;
import com.google.gson.Gson;
import com.google.gson.JsonObject;
import datawave.webservice.HtmlProvider;
import datawave.webservice.query.result.metadata.DefaultMetadataField;
import datawave.webservice.result.TotalResultsAware;
Expand All @@ -26,6 +28,7 @@
import io.protostuff.Message;
import io.protostuff.Output;
import io.protostuff.Schema;
import org.apache.avro.data.Json;
Copy link
Collaborator

@jwomeara jwomeara Jan 13, 2022

Choose a reason for hiding this comment

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

Is this an unused import? I didn't load it up in my IDE but I'm not seeing this used below.


@XmlRootElement(name = "DefaultDataDictionary")
@XmlAccessorType(XmlAccessType.NONE)
Expand All @@ -42,9 +45,14 @@ public class DefaultDataDictionary extends DataDictionaryBase<DefaultDataDiction
* Pagination on the table is turned off, we do an ascending sort on the 2nd column (field name) and a cookie is saved in the browser that will leave the
* last sort in place upon revisit of the page.
*/
private static final String DATA_TABLES_TEMPLATE = "<script type=''text/javascript'' src=''{0}jquery.min.js''></script>\n"
+ "<script type=''text/javascript'' src=''{1}jquery.dataTables.min.js''></script>\n" + "<script type=''text/javascript''>\n"
+ "$(document).ready(function() '{' $(''#myTable'').dataTable('{'\"bPaginate\": false, \"aaSorting\": [[0, \"asc\"]], \"bStateSave\": true'}') '}')\n"
private static final String AG_GRID_TEMPLATE = "<script type=''text/javascript'' src=''{0}jquery.min.js''></script>\n"
+ "<script type=''text/javascript'' src=''{1}24.0.0/dist/ag-grid-community.min.js''></script>\n" + "<script type=''text/javascript''>\n"
+ "var columnDefs = [\n" + " " + " '{'headerName: \"FieldName\", field: \"fieldname\"'}',\n"
+ " '{'headerName: \"Internal FieldName\", field: \"internalFieldName\"'}',\n" + " '{'headerName: \"Data Type\", field: \"datatype\"'}',\n"
+ " '{'headerName: \"Index Only\", field: \"indexOnly\"'}',\n" + " '{'headerName: \"Forward Indexed\", field: \"forwardIndexed\"'}',\n"
+ " '{'headerName: \"Reverse Indexed\", field: \"reverseIndexed\"'}',\n" + " '{'headerName: \"Normalized\", field: \"normalized\"'}',\n"
+ " '{'headerName: \"Types\", field: \"types\"'}',\n" + " '{'headerName: \"Tokenized\", field: \"tokenized\"'}',\n"
+ " '{'headerName: \"Description\", field: \"description\"'}',\n" + " '{'headerName: \"Last Updated\", field: \"lastUpdated\"'}'\n" + "];\n"
+ "</script>\n";

private final String dataTablesHeader;
Expand All @@ -57,11 +65,11 @@ public class DefaultDataDictionary extends DataDictionaryBase<DefaultDataDiction
private Long totalResults = null;

public DefaultDataDictionary() {
this("/webjars/jquery/", "/webjars/datatables/");
this("/webjars/jquery/", "/webjars/ag-grid-community/");
}

public DefaultDataDictionary(String jqueryUri, String datatablesUri) {
this.dataTablesHeader = MessageFormat.format(DATA_TABLES_TEMPLATE, jqueryUri, datatablesUri);
this.dataTablesHeader = MessageFormat.format(AG_GRID_TEMPLATE, jqueryUri, datatablesUri);
}

public DefaultDataDictionary(Collection<DefaultMetadataField> fields) {
Expand Down Expand Up @@ -205,16 +213,24 @@ public String getMainContent() {
builder.append("query terms will be treated (e.g. text, number, IPv4 address, etc). The same applies for the reverse index types with ");
builder.append("the caveat that you can also query these fields using leading wildcards. Fields that are marked as 'Index only' will not ");
builder.append("appear in a result set unless explicitly queried on. Index only fields are typically composite fields, derived from actual data, ");
builder.append("created by the software to make querying easier.</p>");
builder.append("</div>");
builder.append("<table id=\"myTable\">\n");
builder.append("created by the software to make querying easier.</p><input type=\"text\" id=\"filter-text-box\" placeholder=\"Filter...\" oninput=\"onFilterTextBoxChanged()\"/>");

builder.append("<thead><tr><th>FieldName</th><th>Internal FieldName</th><th>DataType</th>");
builder.append("<th>Index only</th><th>Forward Indexed</th><th>Reverse Indexed</th><th>Normalized</th><th>Types</th><th>Tokenized</th><th>Description</th><th>LastUpdated</th></tr></thead>");
builder.append("</div><div id=\"myGrid\" style=\"margin-left: auto;\n" + " margin-right: auto;" + " min-width: 60%;"
+ " max-width: 95%;" + " border: 1px #333333 solid;" + " border-spacing-top: 0;"
+ " border-spacing-bottom: 0;" + " border: 1px #333333 solid;"
+ " border: 1px #333333 solid;\" class=\"ag-theme-alpine\"></div>");

builder.append("<tbody>");
builder.append("<script type=''text/javascript''>\n var rowData = [");
boolean first = true;
Gson gson = new Gson();
for (DefaultMetadataField f : this.getFields()) {
builder.append("<tr>");
if (!first) {
builder.append(",");
} else {
first = false;
}

JsonObject jsonObject = new JsonObject();

String fieldName = (null == f.getFieldName()) ? EMPTY_STR : f.getFieldName();
String internalFieldName = (null == f.getInternalFieldName()) ? EMPTY_STR : f.getInternalFieldName();
Expand All @@ -230,32 +246,39 @@ public String getMainContent() {
}
}

builder.append("<td>").append(fieldName).append("</td>");
builder.append("<td>").append(internalFieldName).append("</td>");
builder.append("<td>").append(datatype).append("</td>");
builder.append("<td>").append(f.isIndexOnly()).append("</td>");
builder.append("<td>").append(f.isForwardIndexed() ? true : "").append("</td>");
builder.append("<td>").append(f.isReverseIndexed() ? true : "").append("</td>");
builder.append("<td>").append(f.getTypes() != null && f.getTypes().size() > 0 ? "true" : "false").append("</td>");
builder.append("<td>").append(types).append("</td>");
builder.append("<td>").append(f.isTokenized() ? true : "").append("</td>");
builder.append("<td>");
jsonObject.addProperty("fieldname", fieldName);
jsonObject.addProperty("internalFieldName", internalFieldName);
jsonObject.addProperty("datatype", datatype);
jsonObject.addProperty("indexOnly", f.isIndexOnly());
jsonObject.addProperty("forwardIndexed", f.isForwardIndexed() ? "true" : "");
jsonObject.addProperty("reverseIndexed", f.isReverseIndexed() ? "true" : "");
jsonObject.addProperty("normalized", f.getTypes() != null && f.getTypes().size() > 0 ? "true" : "false");
jsonObject.addProperty("types", types.toString());
jsonObject.addProperty("tokenized", f.isTokenized() ? "true" : "");

boolean first = true;
boolean firstDesc = true;
StringBuilder descriptionBuilder = new StringBuilder();
for (DescriptionBase desc : f.getDescriptions()) {
if (!first) {
if (!firstDesc) {
builder.append(", ");
}
builder.append(desc.getMarkings()).append(" ").append(desc.getDescription());
first = false;
descriptionBuilder.append(desc.getMarkings()).append(" ").append(desc.getDescription());
firstDesc = false;
}

builder.append("</td>");
builder.append("<td>").append(f.getLastUpdated()).append("</td>").append("</tr>");
jsonObject.addProperty("description", descriptionBuilder.toString());
jsonObject.addProperty("lastUpdated", f.getLastUpdated());
builder.append(gson.toJson(jsonObject));
}
builder.append("</tbody>");

builder.append("</table>\n");
builder.append("];\n");
builder.append(" \n" + "// specify the data\n" + "// let the grid know which columns and what data to use\n" + "var gridOptions = {\n"
+ " columnDefs: columnDefs,\n"
+ " rowData: rowData,paginationAutoPageSize: true, pagination: true,\ndefaultColDef: { resizable: true, sortable: true, filter: true\n"
+ " }," + "};\n" + "\n" + "// setup the grid after the page has finished loading\n" + "\n"
+ " new agGrid.Grid($('#myGrid').get(0), gridOptions);\n" + "\n" + "function onFilterTextBoxChanged() {\n"
+ " gridOptions.api.setQuickFilter(document.getElementById('filter-text-box').value);\n"
+ " gridOptions.api.autoSizeAllColumns(true); }");
builder.append("</script>\n");

return builder.toString();
}
Expand Down
20 changes: 10 additions & 10 deletions service/pom.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<start-class>datawave.microservice.dictionary.DictionaryService</start-class>
<version.microservice.dictionary-api>1.2-SNAPSHOT</version.microservice.dictionary-api>
<version.microservice.starter>1.6.3</version.microservice.starter>
<version.webjars.datatables>1.10.19</version.webjars.datatables>
<version.webjars.ag-grid-community>24.0.0</version.webjars.ag-grid-community>
<version.webjars.jquery>3.3.1-2</version.webjars.jquery>
</properties>
<dependencyManagement>
Expand All @@ -36,16 +36,16 @@
<artifactId>spring-boot-starter-datawave</artifactId>
<version>${version.microservice.starter}</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>datatables</artifactId>
<version>${version.webjars.datatables}</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>${version.webjars.jquery}</version>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>ag-grid-community</artifactId>
<version>${version.webjars.ag-grid-community}</version>
</dependency>
<dependency>
<groupId>gov.nsa.datawave.microservice</groupId>
<artifactId>spring-boot-starter-datawave</artifactId>
Expand Down Expand Up @@ -76,10 +76,6 @@
<groupId>org.apache.accumulo</groupId>
<artifactId>accumulo-core</artifactId>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>datatables</artifactId>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
Expand All @@ -88,6 +84,10 @@
<groupId>org.webjars</groupId>
<artifactId>webjars-locator-core</artifactId>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>ag-grid-community</artifactId>
</dependency>
<dependency>
<groupId>gov.nsa.datawave.contrib</groupId>
<artifactId>datawave-in-memory-accumulo</artifactId>
Expand Down
2 changes: 1 addition & 1 deletion ...src/main/java/datawave/microservice/dictionary/config/DictionaryServiceConfiguration.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ public ResponseObjectFactory<DefaultDescription,DefaultDataDictionary,DefaultMet
@Override
public DefaultDataDictionary getDataDictionary() {
return new DefaultDataDictionary(datawaveServerProperties.getCdnUri() + "webjars/jquery/",
datawaveServerProperties.getCdnUri() + "webjars/datatables/js/");
datawaveServerProperties.getCdnUri() + "webjars/ag-grid-community/");
}

@Override
Expand Down