Merge pull request #8 from p2m2/develop

Update main
p2m2 · Feb 8, 2023 · c02c4c3 · c02c4c3
2 parents 75fbbe1 + c1603ba
commit c02c4c3
Show file tree

Hide file tree

Showing 17 changed files with 1,597 additions and 550 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,8 @@
 # positional-carbon13-enrichment
 [![CircleCI](https://dl.circleci.com/status-badge/img/gh/p2m2/positional-carbon13-enrichment/tree/develop.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/p2m2/positional-carbon13-enrichment/tree/develop)
 
+https://p2m2.github.io/positional-carbon13-enrichment/
+
 ## install
 
 ### Node.js with JSDOM
@@ -36,4 +38,9 @@ sbt positionalCarbonSourcesJVM/assembly
 sbt fastLinkJS 
 ```
 
+```main 
+fullOptJS
+# --> js/target/scala-2.13/positionalcarbonsources-opt
+```
+
 open [index](./html/index.html)
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>The Scala.js Tutorial</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style media = "screen">
+        body {
+            background: #F5F5F5;
+        }
+        .canvasChart {
+            text-align: center;
+            width: 350px;
+        }
+        .gridCanvas {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            grid-gap: 10px;
+        }
+    </style>
+  </head>
+  <body>
+
+    <div id="positionInputFile"></div>
+  <!-- https://www.chartjs.org/docs/latest/getting-started/ -->
+    <div id="positionalCarbonChartCanvas"></div>
+    <!-- Include Scala.js compiled code -->
+    <script type="text/javascript" src="main.js"></script>
+  </body>
+</html>
+
diff --git a/docs/main.js b/docs/main.js
diff --git a/docs/main.js.map b/docs/main.js.map
diff --git a/html/index.html b/html/index.html
@@ -3,9 +3,27 @@
   <head>
     <meta charset="UTF-8">
     <title>The Scala.js Tutorial</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style media = "screen">
+        body {
+            background: #F5F5F5;
+        }
+        .canvasChart {
+            text-align: center;
+            width: 450px;
+        }
+        .gridCanvas {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            grid-gap: 10px;
+        }
+    </style>
   </head>
   <body>
-    <div id="positionalCarbon13div"></div>
+
+    <div id="positionInputFile"></div>
+  <!-- https://www.chartjs.org/docs/latest/getting-started/ -->
+    <div id="positionalCarbonChartCanvas"></div>
     <!-- Include Scala.js compiled code -->
     <script type="text/javascript" src="../js/target/scala-2.13/positionalcarbonsources-fastopt/main.js"></script>
   </body>

diff --git a/js/src/main/scala/fr/inrae/p2m2/webapp/Chart.scala b/js/src/main/scala/fr/inrae/p2m2/webapp/Chart.scala
@@ -0,0 +1,60 @@
+package fr.inrae.p2m2.webapp
+
+import org.scalajs.dom
+
+import scala.scalajs.js
+import scala.scalajs.js.annotation.JSGlobal
+import js.JSConverters._
+
+/**
+ * Documentation Chart.js
+ * https://www.chartjs.org/docs/latest/getting-started/
+ */
+
+@JSGlobal
+@js.native
+class Chart(ctx:dom.Element,obj:js.Dynamic) extends js.Object
+
+
+case object Chart {
+  def buildDataset(title:String, labels: Seq[String],
+                   values_exp: Seq[Double],
+                   values_computed: Seq[Double]): js.Dynamic = {
+
+    js.Dynamic.literal(
+      `type` = "bar",
+      data = js.Dynamic.literal(
+        labels = labels.toJSArray, //js.Array("Red", "Blue", "Yellow", "Green", "Purple", "Orange"),
+        datasets = js.Array(
+          js.Dynamic.literal(
+            label = "Mean enrichment",
+            `data` = (values_exp++values_computed).toJSArray, //js.Array(12.5, 19.2, 3, 5, 2, 3),
+            backgroundColor =
+              (values_exp.indices.map(_=>"rgba(54, 162, 235, 0.2)")
+                  ++ values_computed.indices.map(_=>"rgba(255, 99, 132, 0.2)")).toJSArray,
+            borderWidth = 1
+          ),
+/*
+          js.Dynamic.literal(
+            label = "calculated",
+            `data` = values_computed.toJSArray, //js.Array(12.5, 19.2, 3, 5, 2, 3),
+            backgroundColor = js.Array("rgba(255, 99, 132, 0.2)"),
+            borderWidth = 1
+          )*/
+        ),
+      ),
+      options = js.Dynamic.literal(
+        scales = js.Dynamic.literal(
+          y = js.Dynamic.literal(beginAtZero = 0)
+        ),
+        plugins = js.Dynamic.literal(
+          title = js.Dynamic.literal(
+            display = true,
+            text = title,
+            color = "blue",
+          )
+        ),
+      )
+    )
+  }
+}
diff --git a/js/src/main/scala/fr/inrae/p2m2/webapp/PositionalCarbonMain.scala b/js/src/main/scala/fr/inrae/p2m2/webapp/PositionalCarbonMain.scala
@@ -1,33 +1,120 @@
 package fr.inrae.p2m2.webapp
 
+import scala.scalajs.js
 import org.scalajs.dom
 import scalatags.JsDom.all._
 import fr.inrae.p2m2.workflow.IsocorManagement
+import org.scalajs.dom.{Event, FileReader, HTMLInputElement}
+import org.scalajs.dom.html.{Canvas, Element, Input}
+import scalatags.JsDom
 
+import scala.scalajs.js.JSON
 import scala.util.{Failure, Success, Try}
 
 object PositionalCarbonMain {
+  val inputTagId : String = "positionInputFile"
+  val idMainDiv : String = "positionalCarbonChartCanvas"
 
-  def main(args: Array[String]): Unit = {
-    println("Hello world!")
-    val res : String = Try(IsocorManagement.workflow(IsocorDataExample.exampleContentIsocor)) match {
-      case Success(v) => println("OK") ;v.toString
+  def buildCanvasBarPlot(idBarPlot: String): JsDom.TypedTag[Canvas] =
+    canvas(id := idBarPlot)
+
+
+  def appendCanvas(idDivSample:String,idDiv:String,idCanvas:String) =
+    dom
+      .document
+      .getElementById(idDivSample)
+      .append(
+        div( id:=idDiv ,
+          `class` := "canvasChart",
+          buildCanvasBarPlot(idCanvas) )
+          .render)
+
+  def updateHtmlPage(content : String) = {
+    dom.document.getElementById(idMainDiv).innerHTML = div( id:=idMainDiv ).render.innerHTML
+
+    Try(IsocorManagement.workflow(content.trim)) match {
+      case Success(v) => {
+        val metabolites_with_me: Map[(String, String), Seq[(String, Double, Boolean)]] = v
+        metabolites_with_me
+          .groupBy(_._1._1)
+          .foreach {
+            case ((sample, listV)) =>
+              val idDivSample = s"div_$sample"
+              dom
+                .document
+                .getElementById(idMainDiv)
+                .append(
+                  div(
+                    h1(sample),
+                    div(id:=idDivSample, `class`:="gridCanvas")
+                  ).render
+                )
+
+              listV.foreach {
+                case ((sample, metabolite), data) if data.nonEmpty =>
+                  val idDiv: String = sample + "_" + metabolite + "_" + "_div"
+                  val idCanvas: String = sample + "_" + metabolite + "_" + "_canvas"
+                  val title = metabolite
+
+                  val labels = data.map(_._1)
+                  val values_exp = data.filter(_._3).map(_._2)
+                  val values_calc = data.filter(!_._3).map(_._2)
+
+                  //println("****************")
+                  //println(sample,metabolite)
+                  //println("EXP")
+                  //data.filter(_._3).foreach{ elt => println(elt)}
+                 // println("CALC")
+                 // values_calc.foreach{ elt => println(elt)}
+
+                  appendCanvas(idDivSample,idDiv, idCanvas)
+
+                  val ctx = dom.document.getElementById(idCanvas)
+                  new Chart(ctx, Chart.buildDataset(title,labels, values_exp,values_calc))
+                case _ => println("ok")
+              }
+          }
+      }
       case Failure(exception) =>
-        System.err.println(exception.getMessage)
-        exception.getMessage
+        dom.document
+          .getElementById (idMainDiv)
+          .append(
+            div(
+              h1(id := "Error Message", " - Exception - "),
+              p(exception.getMessage)
+            ).render
+          )
     }
-    println(res)
-    dom.document.getElementById("positionalCarbon13div").innerHTML = html(
-      head(
-        script(src := "..."),
-        //script("alert('Hello World')")
-      ),
-      body(
-        div(
-          h1(id := "title", "This is a title"),
-          p(res)
-        )
-      )
-    ).render.innerHTML
   }
+
+  def main(args: Array[String]): Unit = {
+
+
+    val inputTag: JsDom.TypedTag[Input] = input(
+      id := "isocorInputFile",
+      `type` := "file",
+      onchange := {
+        () =>
+          val tag = dom.document.getElementById("isocorInputFile")
+          val files = tag.render.asInstanceOf[HTMLInputElement].files
+
+          if (files.nonEmpty) {
+            val reader = new FileReader();
+            reader.onload = (event : Event) => {
+              val content = reader.result.toString
+              updateHtmlPage(content)
+            }
+         //   println(s"reading ${files(0).name}")
+            reader.readAsText(files(0));
+          }
+
+      }
+    )
+
+    dom
+      .document
+      .getElementById(inputTagId)
+      .append(inputTag.render)
+
+    }
 }