Add a PieChart. Fixes #141.

JULIELab · Apr 11, 2022 · 3338911 · 3338911
1 parent 003a58f
commit 3338911
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 39 deletions.
diff --git a/gepi/gepi-core/src/main/java/de/julielab/gepi/core/services/GePiDataService.java b/gepi/gepi-core/src/main/java/de/julielab/gepi/core/services/GePiDataService.java
@@ -94,8 +94,8 @@ public JSONArray getArgumentCount(List<Event> evtList, int argumentPosition) {
 
  singleArgCount.forEach((k, v) -> {
  JSONArray tmp = new JSONArray();
- tmp.put(k.getPreferredName());
- tmp.put(v);
+ tmp.add(k.getPreferredName());
+ tmp.add(v);
  singleArgCountJson.put(tmp);
  });
  return singleArgCountJson;

diff --git a/gepi/gepi-webapp/src/main/java/de/julielab/gepi/webapp/components/GepiWidgetLayout.java b/gepi/gepi-webapp/src/main/java/de/julielab/gepi/webapp/components/GepiWidgetLayout.java
@@ -8,15 +8,21 @@
 import de.julielab.gepi.webapp.pages.Index;
 import org.apache.tapestry5.BindingConstants;
 import org.apache.tapestry5.ComponentResources;
+import org.apache.tapestry5.StreamResponse;
 import org.apache.tapestry5.annotations.*;
 import org.apache.tapestry5.corelib.components.Zone;
 import org.apache.tapestry5.http.Link;
+import org.apache.tapestry5.http.services.Response;
 import org.apache.tapestry5.ioc.annotations.Inject;
 import org.apache.tapestry5.json.JSONObject;
 import org.apache.tapestry5.services.ajax.AjaxResponseRenderer;
 import org.apache.tapestry5.services.javascript.JavaScriptSupport;
 import org.slf4j.Logger;
 
+import java.io.ByteArrayInputStream;
+import java.io.IOException;
+import java.io.InputStream;
+import java.nio.charset.StandardCharsets;
 import java.util.concurrent.ExecutionException;
 import java.util.concurrent.Future;
 
@@ -57,6 +63,9 @@ final public class GepiWidgetLayout {
  @Parameter
  @Property
  protected GepiRequestData requestData;
+ @Parameter(value="false")
+ @Property
+ protected boolean downloadable;
 
  @InjectComponent
  private Zone widgetZone;
@@ -194,7 +203,6 @@ public String getResizeHandleId() {
  return clientId + "_resize";
  }
 
-
  @Log
  public boolean isLarge() {
  return viewMode.equals(ViewMode.LARGE.name().toLowerCase());

diff --git a/gepi/gepi-webapp/src/main/resources/META-INF/modules/gepi/charts/piechart.js b/gepi/gepi-webapp/src/main/resources/META-INF/modules/gepi/charts/piechart.js
@@ -25,25 +25,54 @@ define(['jquery', 'gepi/charts/data', 'gepi/pages/index', 'gepi/components/widge
  }
 
  init() {
- const argCounts = data.getData('acounts');
+ // Remove the Loading... banner
+ $('#' + this.elementId + '-outer .text-center.shine').remove();
+
+ const argCounts = data.getData('acounts')['argumentcounts'];
+ let argMap = {}
+ for (let i = 0; i < argCounts.length; i++)
+ argMap[argCounts[i][0]] = argCounts[i][1]
 
  let svg = d3.select('#'+this.elementId)
  .append('svg')
  .attr('width', 300)
  .attr('height', 300);
-
- let colorScale = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
+
+ let colorScale = d3.scaleOrdinal().domain(argCounts.map(i => i[0])).range(d3.schemeSet2);
+ let maxFrequency = d3.max(argCounts.map(x => x[1]));
+
+ let sequentialScale = d3.scaleSequential()
+ .domain([0, maxFrequency])
+ .interpolator(d3.interpolateViridis);
  // the data items are arrays where first element is the gene symbol and the second is the count
- let pie = d3.pie()
+ let pieGen = d3.pie()
  .value(d => d[1])
  let arc = d3.arc()
- .outerRadius(200);
+ .innerRadius(0)
+ .outerRadius(100);
 
- svg.append('g')
- .selectAll('path')
- .enter(pie(argCounts))
+ let pie = pieGen(argCounts)
+ console.log(pie)
+ let g = svg.append('g')
+ .attr('transform', 'translate(150,150)');
+ g.selectAll('path')
+ .data(pie)
+ .enter()
+ .append('path')
  .attr('d', arc)
- .attr('fill', d => colorScale(d[0]))
+ .attr('fill', d => colorScale(d.value))
+ g.selectAll('text')
+ .data(pie)
+ .enter()
+ .filter(d => (d.endAngle - d.startAngle)*100 > 30)
+ .append('text')
+ .text(d => d.data[0])
+ .attr('transform', d => 'translate('+arc.centroid(d)+')')
+ .style('text-anchor', 'middle')
  }
  }
-}
+
+ return function newPieWidget(elementId, widgetsettings) {
+ widgetManager.addWidget(widgetsettings.widgetId, new PieWidget(elementId, widgetsettings));
+ };
+});
diff --git a/gepi/gepi-webapp/src/main/resources/de/julielab/gepi/webapp/components/GepiWidgetLayout.tml b/gepi/gepi-webapp/src/main/resources/de/julielab/gepi/webapp/components/GepiWidgetLayout.tml
@@ -1,27 +1,30 @@
 <!DOCTYPE html>
 <t:container xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd" xmlns:p="tapestry:parameter">
- <div class="${classes}">
- <div class="card ${viewmode} widget full-height" id="${clientId}">
- <div class="card-header text-center">
- ${widgettitle}
- <span id="${resizeHandleId}" class="float-right widget-resize-to-full widget-tool-symbol" />
- </div>
- <t:zone t:id="widgetZone" id="prop:${zoneid}" class="full-height">
- <div class="card-body widget ${viewmode} full-height">
- <!-- Note that is not if-else but two ifs. For JS-based charts, the body is always rendered
- but manually hidden until data is available. In all cases, the waiting message is displayed
- if no data is available at render time -->
- <t:if test="resultloading">
- <div class="text-center shine mt-2">
- ${message:loading}
- </div>
- <t:trigger event="load" />
- </t:if>
- <t:if test="renderbody">
- <t:body />
- </t:if>
- </div>
- </t:zone>
- </div>
- </div>
+ <div class="${classes}">
+ <div class="card ${viewmode} widget full-height" id="${clientId}">
+ <div class="card-header text-center">
+ ${widgettitle}
+ <span id="${resizeHandleId}" class="float-right widget-resize-to-full widget-tool-symbol ms-2"/>
+ <t:if test="downloadable">
+ <t:eventlink event="download" role="button" class="float-right widget-tool-symbol widget-download"/>
+ </t:if>
+ </div>
+ <t:zone t:id="widgetZone" id="prop:${zoneid}" class="full-height">
+ <div class="card-body widget ${viewmode} full-height">
+ <!-- Note that is not if-else but two ifs. For JS-based charts, the body is always rendered
+ but manually hidden until data is available. In all cases, the waiting message is displayed
+ if no data is available at render time -->
+ <t:if test="resultloading">
+ <div class="text-center shine mt-2">
+ ${message:loading}
+ </div>
+ <t:trigger event="load"/>
+ </t:if>
+ <t:if test="renderbody">
+ <t:body/>
+ </t:if>
+ </div>
+ </t:zone>
+ </div>
+ </div>
 </t:container>
diff --git a/gepi/gepi-webapp/src/main/resources/de/julielab/gepi/webapp/components/TableResultWidget.tml b/gepi/gepi-webapp/src/main/resources/de/julielab/gepi/webapp/components/TableResultWidget.tml
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <div xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd" xmlns:p="tapestry:parameter" t:type="gepiwidgetlayout"
  widgettitle="Table View" t:clientId="tableresult_widget" class="${classes}" sizeClass="widget-large" esResult="esResult"
- viewMode="viewMode" useTapestryZoneUpdates="false" requestData="requestData"
+ viewMode="viewMode" useTapestryZoneUpdates="false" requestData="requestData" downloadable="true"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="tapestry:parameter ">
 <!-- <t:trigger event="updateTableData"/>-->
  <div>${viewmode}</div>
- <t:eventlink event="download" role="button" class="btn btn-primary">Download</t:eventlink>
+<!-- <t:eventlink event="download" role="button" class="btn btn-primary">Download</t:eventlink>-->
  <t:grid source="eventSource" row="eventrow" model="tableModel" rowsPerPage="${rowsperpage}" pagerPosition="bottom">
  <p:firstArgumentPreferredNameCell>
  <a href="https://www.ncbi.nlm.nih.gov/gene/${eventrow.firstargumentgeneid}" target="_blank" data-toggle="tooltip" data-placement="top" title="Open gene ID ${eventrow.firstargumentgeneid} in NCBI Gene">${eventrow.firstArgumentPreferredName}</a>

diff --git a/gepi/gepi-webapp/src/main/webapp/css-components/gepiwidgetlayout.css b/gepi/gepi-webapp/src/main/webapp/css-components/gepiwidgetlayout.css
@@ -30,6 +30,13 @@
  background-position: center;
 }
 
+.widget-download {
+ cursor: pointer;
+ background-image: url("../images/file_download_black_24dp.svg");
+ background-repeat: no-repeat;
+ background-position: center;
+}
+
 .widget-resize-to-small {
  cursor: pointer;
  background-image: url("../images/close_fullscreen_black_24dp.svg");

diff --git a/gepi/gepi-webapp/src/main/webapp/images/file_download_black_24dp.svg b/gepi/gepi-webapp/src/main/webapp/images/file_download_black_24dp.svg