added dscensor starter. #224

legumeinfo · May 8, 2024 · 7a73c1a · 7a73c1a
1 parent 39d6ebb
commit 7a73c1a
Show file tree

Hide file tree

Showing 3 changed files with 172 additions and 1 deletion.
diff --git a/dev/lis-dscensor-demo.html b/dev/lis-dscensor-demo.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+
+<html>
+
+  <head>
+    <meta charset="utf-8" />
+    <title>LIS Web-Components - &lt;lis-gene-search-element&gt;</title>
+    <!-- CSS framework -->
+    <link rel="stylesheet" type="text/css" href="../node_modules/uikit/dist/css/uikit.min.css">
+    <script src="../node_modules/uikit/dist/js/uikit.min.js"></script>
+    <!-- web components polyfills -->
+    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../node_modules/lit/polyfill-support.js"></script>
+    <!-- GraphQL -->
+    <script type="text/javascript" src="./services-dscensor.js"></script>
+    <!-- web components -->
+    <script type="module" src="../lib/index.js"></script>
+  </head>
+
+  <body>
+
+    <div class="uk-container uk-margin-bottom">
+      <h1>&lt;dscensor-element&gt;</h1>
+      <p>
+        The <code>&lt;dscensor-element&gt;</code> is developmental and serves to eventually replace the existing multiQC view.
+      </p>
+      <hr>
+    </div>
+
+    <div class="uk-container uk-container-expand">
+      <div class="uk-container uk-container-expand">
+      <form id="dscensor-form">
+        <label for="genera">Genera:</label>
+        <select id="genera" name="genera">
+        </select>
+        <input type="submit" value="Submit">
+      </form>
+      </div>
+      <lis-simple-table-element id="dscensor-table"></lis-simple-table-element>
+      <lis-histogram-element id="dscensor-histogram"></lis-histogram-element>
+    </div>
+
+    <!-- set the search function by property because functions can't be set as attributes -->
+    <script type="text/javascript">
+      // get the simple table element
+      window.onload = (event) => {
+        const form = document.getElementById('dscensor-form');
+        form.addEventListener('submit', (event) => dscensorSubmit(event));
+
+	const dropdown = document.getElementById('genera');
+
+	const genera = dscensorQuery(getGenus);
+	  genera.then((g) => { g.forEach((genera) => {
+            const option = document.createElement('option');
+            option.value = genera;
+            option.text = genera;
+            dropdown.appendChild(option);
+          });
+	});
+      }
+
+      function dscensorSubmit(event){
+        const genera = document.getElementById('genera');
+        const query = 'genomes?genus=' + genera.options[genera.selectedIndex].value;
+	const customUrl = uri + query;
+        const data = dscensorFormQuery(event, customUrl);
+        data.then((ds) => {
+          const formatted = ds.map(d => (flatten(d)));
+          console.log(formatted);
+          const dataAttributes = Object.keys(formatted[0]);
+
+		let index = dataAttributes.indexOf('url');
+                if (index > -1) { // only splice array when item is found
+                  dataAttributes.splice(index, 1); // 2nd parameter means remove one item only
+                }
+		index = dataAttributes.indexOf('derived_from');
+                if (index > -1) { // only splice array when item is found
+                  dataAttributes.splice(index, 1); // 2nd parameter means remove one item only
+                }
+
+          const labels = {}
+                dataAttributes.map((d) => labels[[d]] = d);
+          console.log(dataAttributes, labels);
+          const tableElement = document.getElementById('dscensor-table');
+          // set the element's properties
+          tableElement.caption = 'DSCensor Test';
+          tableElement.dataAttributes = dataAttributes;
+          tableElement.header = labels;
+          tableElement.data = formatted;
+          const histoElement = document.getElementById('dscensor-histogram');
+          histoElement.width = 1000;
+          histoElement.height = 1000;
+          histoElement.ylabel = 'Complete BUSCOs';
+          histoElement.xlabel = 'Genome';
+          histoElement.data = tableElement.data.map((d) => ({"name": d.filename, "count": d.complete_buscos}));
+       });
+      }
+    </script>
+
+  </body>
+
+</html>
diff --git a/dev/services-dscensor.js b/dev/services-dscensor.js
@@ -0,0 +1,63 @@
+// query a local instance of the LIS GraphQL server:
+// https://github.com/legumeinfo/graphql-server
+
+// Note: using port 4444 since port 4000 is default for jekyll site
+const uri = 'https://services.lis.ncgr.org/dscensor/';
+const exampleQuery = 'genomes?genus=arachis'
+const url = uri + exampleQuery
+const getGenus = 'https://services.lis.ncgr.org/dscensor/genera'
+// A function that gets data from a GraphQL server via a POST request.
+// Adapted from https://graphql.org/graphql-js/graphql-clients/
+function dscensorQuery(url) {
+    return fetch(url, {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json',
+        },
+    })
+    .then(r => r.json())
+    .then((response) => {
+      if (response.errors) {
+        response.errors.forEach(console.error);
+      }
+      return response;
+    });
+}
+
+function dscensorFormQuery(event, url) {
+    event.preventDefault(); // prevent the form from submitting normally
+    // your custom code here
+    console.log('Form submitted');
+    console.log('URL:', url);
+    return fetch(url, {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json',
+        },
+    })
+    .then(r => r.json())
+    .then((response) => {
+      if (response.errors) {
+        response.errors.forEach(console.error);
+      }
+      return response;
+    });
+}
+
+// Flatten GraphQL results that contain objects
+const flatten = (obj, out={}, prefixes=[]) => {
+    if (obj != null) {
+        Object.keys(obj).forEach(key => {
+            const key_prefixes = [...prefixes, key];
+            if (typeof obj[key] == 'object' && !Array.isArray(obj[key])) {
+                out = flatten(obj[key], out, key_prefixes);
+            } else {
+//                const prefix_key = key_prefixes.join('_');
+                out[key] = obj[key];
+            }
+        });
+    }
+    return out;
+};
diff --git a/src/core/lis-histogram-element.ts b/src/core/lis-histogram-element.ts
@@ -248,7 +248,7 @@ export class LisHistogramElement extends LitElement {
       .text(this.orientation === 'vertical' ? this._xlabel : this._ylabel);
 
     // Add the x-axis
-    svgContainer
+    const xAxis = svgContainer
       .append('g')
       .attr(
         'transform',
@@ -260,6 +260,12 @@ export class LisHistogramElement extends LitElement {
         this.orientation === 'vertical' ? d3.axisLeft(x) : d3.axisBottom(x),
       );
 
+    // Rotate the x-axis labels
+    xAxis
+      .selectAll('text')
+      .attr('transform', 'rotate(-45)')
+      .style('text-anchor', 'end');
+
     // Add the y-axis
     svgContainer
       .append('g')