Integrate plotly.js

build.sbt

@@ -11,18 +11,18 @@ val laminarVersion = "0.12.2"
 val scaladgetVersion = "1.9.0"
 val scalajsDomVersion = "1.1.0"
 val scalatagsVersion = "0.9.4"
-val plotlyVersion = "1.5.4"
+val plotlyVersion = "1.5.6"
 val openmoleVersion = "14.0-SNAPSHOT"
 
-lazy val shared = project.in(file("shared")) settings (
+lazy val shared = project.in(file("shared")) settings(
   scalaVersion := ScalaVersion,
-    libraryDependencies += "org.openmole" %% "org-openmole-plugin-method-evolution" % openmoleVersion
-  ) enablePlugins (ScalaJSPlugin)
+  libraryDependencies += "org.openmole" %% "org-openmole-plugin-method-evolution" % openmoleVersion
+) enablePlugins (ScalaJSPlugin)
 
 
 lazy val go = taskKey[Unit]("go")
 
-lazy val client = project.in(file("client")) enablePlugins(ScalaJSPlugin, ScalaJSBundlerPlugin) settings(
+lazy val client = project.in(file("client")) enablePlugins(JSDependenciesPlugin, ScalaJSBundlerPlugin) settings(
   version := Version,
   scalaVersion := ScalaVersion,
   scalaJSUseMainModuleInitializer := true,
@@ -68,7 +68,7 @@ lazy val bootstrap = project.in(file("target/bootstrap")) enablePlugins(ScalaJSP
     val demoTarget = (server / Compile / target).value
     val demoResource = (client / Compile / resourceDirectory).value
 
-
+    IO.copyFile((client / crossTarget).value / s"${(client / name).value}-jsdeps.js", demoTarget / "webapp/js/deps.js")
     IO.copyFile(jsBuild, demoTarget / "webapp/js/demo.js")
     IO.copyDirectory(demoResource, demoTarget)
   }) dependsOn(client, server)

client/src/main/scala/fr/iscpif/client/Client.scala

@@ -13,32 +13,43 @@ import boopickle.Default._
 
 import scala.scalajs.js.typedarray.{ArrayBuffer, TypedArrayBuffer}
 import com.raquo.laminar.api.L._
-
 import shared.DataUI
+import shared.DataUI.OMRData
 
 object App {
 
   def main(args: Array[String]): Unit = {
 
     val method = Var("")
+    val experiment = Var("")
+    val convergencePlot = Var(div())
 
     lazy val d = div(
-      h2("My plot"),
-      Histogram.build
+      h3(child.text <-- experiment.signal),
+      h4(child.text <-- method.signal.map{m=> s"with the method $m"}),
+      child <-- convergencePlot.signal
     )
 
     Post[shared.Api].convergence().call().foreach {c=>
-      println("C " + c)
+      c match {
+        case nsga2: DataUI.NSGA2.Convergence=> convergencePlot.set(NSGA2.convergence(nsga2))
+        case _=>
+      }
     }
 
     Post[shared.Api].metadata().call().foreach {m=>
       m match {
-        case nsga2: DataUI.NSGA2.Metadata=> println("M " + nsga2.OMRData.method)
-        case stNSGA2: DataUI.StochasticNSGA2.Metadata=> println("M " + stNSGA2.OMRData.method)
+        case nsga2: DataUI.NSGA2.Metadata=> setMetadata(nsga2.OMRData) //println("M " + nsga2.OMRData.method)
+        case stNSGA2: DataUI.StochasticNSGA2.Metadata=> setMetadata(stNSGA2.OMRData)//println("M " + stNSGA2.OMRData.method)
       }
 
     }
 
+    def setMetadata(omrData: OMRData) = {
+      method.set(omrData.method)
+      experiment.set(s"${omrData.fileName} - ${omrData.version}")
+    }
+
     documentEvents.onDomContentLoaded.foreach { _ =>
       render(scalajs.dom.document.body, d)
     }(unsafeWindowOwner)

client/src/main/scala/fr/iscpif/client/Histogram.scala → client/src/main/scala/fr/iscpif/client/NSGA2.scala

@@ -3,40 +3,38 @@ package client
 import org.openmole.plotlyjs._
 import org.openmole.plotlyjs.all._
 
-import scala.scalajs.js.JSConverters._
+import scala.scalajs.js.JSConverters.{iterableOnceConvertible2JSRichIterableOnce, _}
 import org.openmole.plotlyjs.PlotlyImplicits._
 import com.raquo.laminar.api.L._
-
 import org.openmole.plotlyjs.HistogramDataBuilder.HistogramDataBuilder
+import shared.DataUI
 
 import scala.scalajs._
 
-object Histogram {
+object NSGA2 {
 
-  def build = {
+  def convergence(convergenceData: DataUI.NSGA2.Convergence) = {
     val plotDiv = div()
 
     val layout = Layout
-      .title("My line plot")
-      .grid(grid.columns(3).rows(1).pattern(Pattern.coupled))
+      .title("NSGA2 CONVERGENCE")
       .showlegend(true)
+      .xaxis(axis.title("Generation"))
+      .yaxis(axis.title("Hyper volume"))
 
-    val data1 = histogram
-      .x(Utils.randomInts(500))
-      .name("First serie")
-      .xbins(Bin.start(0.0).end(1000.0).size(25))
+    val data = linechart.lines
 
-    val data2 = histogram
-      .x(Utils.anArray.toJSArray)
-      .xaxis("x2")
-      .name("Second serie")
+    val dataRef = data
+      .x(convergenceData.generationConvergence.map{_.generation.toString}.toJSArray)
+      .y(convergenceData.generationConvergence.map{_.hypervolume.getOrElse(0.0)}.toJSArray)
+      .marker(marker.symbol(square).color(all.color.rgb(180, 0, 0)).size(12.0))
 
-    val data3 = histogram
-      .x(Utils.anArray.toJSArray)
-      .xaxis("x3")
-      .name("Second serie")
+    val config = Config.displayModeBar(false)
 
-    Plotly.newPlot(plotDiv.ref, js.Array(data1, data2, data3), layout = layout)
+    Plotly.newPlot(plotDiv.ref,
+      js.Array(dataRef._result),
+      layout,
+      config)
 
     plotDiv
   }

project/plugins.sbt

@@ -5,4 +5,6 @@ addSbtPlugin("ch.epfl.scala" % "sbt-scalajs-bundler" % "0.20.0")
 
 addSbtPlugin("org.scalatra.sbt" % "sbt-scalatra" % "1.0.4")
 
-addSbtPlugin("com.timushev.sbt" % "sbt-updates" % "0.5.3")
\ No newline at end of file
+addSbtPlugin("com.timushev.sbt" % "sbt-updates" % "0.5.3")
+
+addSbtPlugin("org.scala-js" % "sbt-jsdependencies" % "1.0.2")
\ No newline at end of file

server/src/main/scala/fr/iscpif/app/Servlet.scala

@@ -29,7 +29,7 @@ class Servlet extends ScalatraServlet {
     tags.html(
       tags.head(
         tags.meta(tags.httpEquiv := "Content-Type", tags.content := "text/html; charset=UTF-8"),
-        tags.script(tags.`type` := "text/javascript", tags.src := "js/plotly.min.js"),
+        tags.script(tags.`type` := "text/javascript", tags.src := "js/deps.js"),
         tags.script(tags.`type` := "text/javascript", tags.src := "js/demo.js")
       ),
     //  body(onload := "run();")