demo/js-playground/src/main/kotlin/JsPlaygroundApp.kt

@@ -9,11 +9,11 @@ import react.dom.render
 import ringui.SmartTabs
 import ringui.Tab
 import space.kscience.dataforge.context.Context
-import space.kscience.gdml.GdmlShowCase
+import space.kscience.plotly.models.Trace
+import space.kscience.plotly.models.appendXY
 import space.kscience.plotly.scatter
 import space.kscience.visionforge.Application
 import space.kscience.visionforge.VisionClient
-import space.kscience.visionforge.gdml.toVision
 import space.kscience.visionforge.plotly.PlotlyPlugin
 import space.kscience.visionforge.ring.ThreeCanvasWithControls
 import space.kscience.visionforge.ring.ThreeWithControlsPlugin
@@ -36,6 +36,8 @@ private class JsPlaygroundApp : Application {
 
         val element = document.getElementById("playground") ?: error("Element with id 'playground' not found on page")
 
+        val bouncingSphereTrace = Trace()
+
         val bouncingSphere = SolidGroup {
             sphere(5.0, "ball") {
                 detail = 16
@@ -52,20 +54,19 @@ private class JsPlaygroundApp : Application {
                         time += dt
                         velocity -= g * dt
                         y = y.toDouble() + velocity * dt
-                        if (y.toDouble() <= 2.5){
+                        bouncingSphereTrace.appendXY(time, y)
-                            velocity = sqrt(2*g*h)
+                        if (y.toDouble() <= 2.5) {
+                            //conservation of energy
+                            velocity = sqrt(2 * g * h)
                         }
                     }
                 }
             }
 
-            box(200, 5, 200, name = "floor"){
+            box(200, 5, 200, name = "floor") {
                 y = -2.5
             }
         }
-
-        val visionOfD0 = GdmlShowCase.babyIaxo().toVision()
-
         val random = Random(112233)
 
         val visionOfSpheres = SolidGroup {
@@ -92,6 +93,10 @@ private class JsPlaygroundApp : Application {
                 }
                 SmartTabs("gravity") {
                     Tab("gravity") {
+                        styledDiv {
+                            css{
+                                height = 50.vh
+                            }
                             child(ThreeCanvasWithControls) {
                                 attrs {
                                     context = playgroundContext
@@ -99,15 +104,30 @@ private class JsPlaygroundApp : Application {
                                 }
                             }
                         }
+                        styledDiv {
+                            css{
+                                height = 40.vh
+                            }
 
-                    Tab("D0") {
+                            Plotly {
-                        child(ThreeCanvasWithControls) {
                                 attrs {
                                     context = playgroundContext
-                                solid = visionOfD0
+                                    plot = space.kscience.plotly.Plotly.plot {
+                                        traces(bouncingSphereTrace)
                                     }
                                 }
                             }
+                        }
+                    }
+
+//                    Tab("D0") {
+//                        child(ThreeCanvasWithControls) {
+//                            attrs {
+//                                context = playgroundContext
+//                                solid = GdmlShowCase.babyIaxo().toVision()
+//                            }
+//                        }
+//                    }
                     Tab("spheres") {
                         child(ThreeCanvasWithControls) {
                             attrs {

demo/js-playground/src/main/kotlin/plotlyComponent.kt

@@ -1,4 +1,4 @@
-import kotlinx.css.*
+import kotlinx.css.flex
 import org.w3c.dom.Element
 import org.w3c.dom.HTMLElement
 import react.RProps
@@ -27,8 +27,6 @@ val Plotly = functionalComponent<PlotlyProps>("Plotly"){props ->
 
     styledDiv {
         css {
-            maxWidth = 100.vw
-            maxHeight = 100.vh
             flex(1.0)
         }
         ref = elementRef