Update js examples

build.gradle.kts

@@ -1,5 +1,6 @@
 plugins {
     id("ru.mipt.npm.gradle.project")
+    kotlin("multiplatform") version "1.5.30-RC" apply false
 }
 
 val dataforgeVersion by extra("0.5.0")

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

@@ -2,16 +2,22 @@ import kotlinx.browser.document
 import kotlinx.css.*
 import react.child
 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.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
+import space.kscience.visionforge.solid.*
 import space.kscience.visionforge.startApplication
 import styled.css
 import styled.styledDiv
+import kotlin.random.Random
 
 private class JsPlaygroundApp : Application {
 
@@ -20,24 +26,65 @@ private class JsPlaygroundApp : Application {
         val playgroundContext = Context {
             plugin(ThreeWithControlsPlugin)
             plugin(VisionClient)
+            plugin(PlotlyPlugin)
         }
 
         val element = document.getElementById("playground") ?: error("Element with id 'playground' not found on page")
 
         val visionOfD0 = GdmlShowCase.babyIaxo().toVision()
 
+        val random = Random(112233)
+        val visionOfSpheres = SolidGroup {
+            repeat(100) {
+                sphere(5, name = "sphere[$it]") {
+                    x = random.nextDouble(-300.0, 300.0)
+                    y = random.nextDouble(-300.0, 300.0)
+                    z = random.nextDouble(-300.0, 300.0)
+                    material {
+                        color(random.nextInt())
+                    }
+                    detail = 16
+                }
+            }
+        }
+
         render(element) {
             styledDiv {
-                css{
+                css {
                     padding(0.pt)
                     margin(0.pt)
                     height = 100.vh
                     width = 100.vw
                 }
-                child(ThreeCanvasWithControls) {
-                    attrs {
-                        context = playgroundContext
-                        solid = visionOfD0
+                SmartTabs("D0") {
+                    Tab("D0") {
+                        child(ThreeCanvasWithControls) {
+                            attrs {
+                                context = playgroundContext
+                                solid = visionOfD0
+                            }
+                        }
+                    }
+                    Tab("spheres") {
+                        child(ThreeCanvasWithControls) {
+                            attrs {
+                                context = playgroundContext
+                                solid = visionOfSpheres
+                            }
+                        }
+                    }
+                    Tab("plotly"){
+                        Plotly{
+                            attrs {
+                                context = playgroundContext
+                                plot = space.kscience.plotly.Plotly.plot {
+                                    scatter {
+                                        x(1, 2, 3)
+                                        y(5, 8, 7)
+                                    }
+                                }
+                            }
+                        }
                     }
                 }
             }

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

@@ -0,0 +1,36 @@
+import kotlinx.css.*
+import org.w3c.dom.Element
+import org.w3c.dom.HTMLElement
+import react.RProps
+import react.functionalComponent
+import react.useEffect
+import react.useRef
+import space.kscience.dataforge.context.Context
+import space.kscience.plotly.Plot
+import space.kscience.plotly.plot
+import styled.css
+import styled.styledDiv
+
+external interface PlotlyProps: RProps{
+    var context: Context
+    var plot: Plot?
+}
+
+
+val Plotly = functionalComponent<PlotlyProps>("Plotly"){props ->
+    val elementRef = useRef<Element>(null)
+
+    useEffect(props.plot, elementRef) {
+        val element = elementRef.current as? HTMLElement ?: error("Plotly element not found")
+        props.plot?.let { element.plot(it)}
+    }
+
+    styledDiv {
+        css {
+            maxWidth = 100.vw
+            maxHeight = 100.vh
+            flex(1.0)
+        }
+        ref = elementRef
+    }
+}

visionforge-plotly/src/jsMain/kotlin/space/kscience/visionforge/plotly/plotlyJs.kt

@@ -31,8 +31,8 @@ public actual class PlotlyPlugin : VisionPlugin(), ElementVisionRenderer {
     override fun render(element: Element, vision: Vision, meta: Meta) {
         val plot = (vision as? VisionOfPlotly)?.plot ?: error("VisionOfPlotly expected but ${vision::class} found")
         val config = PlotlyConfig.read(meta)
-        println(plot.meta)
-        println(plot.data[0].toMeta())
+//        println(plot.meta)
+//        println(plot.data[0].toMeta())
         element.plot(plot, config)
     }