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

@@ -9,7 +9,6 @@ import ringui.SmartTabs
 import ringui.Tab
 import space.kscience.dataforge.context.Context
 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
@@ -24,6 +23,14 @@ import styled.styledDiv
 import kotlin.math.sqrt
 import kotlin.random.Random
 
+fun Trace.appendXYLatest(x: Number, y: Number, history: Int = 400, xErr: Number? = null, yErr: Number? = null) {
+    this.x.numbers = (this.x.numbers + x).takeLast(history)
+    this.y.numbers = (this.y.numbers + y).takeLast(history)
+    xErr?.let { error_x.array = (error_x.array + xErr).takeLast(history) }
+    yErr?.let { error_y.array = (error_y.array + yErr).takeLast(history) }
+}
+
+
 private class JsPlaygroundApp : Application {
 
     override fun start(state: Map<String, Any>) {
@@ -71,7 +78,7 @@ private class JsPlaygroundApp : Application {
                                                     time += dt
                                                     velocity -= g * dt
                                                     y = y.toDouble() + velocity * dt
-                                                    bouncingSphereTrace.appendXY(time, y)
+                                                    bouncingSphereTrace.appendXYLatest(time, y)
                                                     if (y.toDouble() <= 2.5) {
                                                         //conservation of energy
                                                         velocity = sqrt(2 * g * h)

ui/react/src/main/kotlin/space/kscience/visionforge/react/valueChooser.kt

@@ -143,15 +143,8 @@ public val ComboValueChooser: FunctionComponent<ValueChooserProps> =
 @JsExport
 public val ColorValueChooser: FunctionComponent<ValueChooserProps> =
     functionalComponent("ColorValueChooser") { props ->
-        var value by useState(
-            props.actual.value?.let { value ->
-                if (value.type == ValueType.NUMBER) Colors.rgbToString(value.int)
-                else value.string
-            } ?: "#000000"
-        )
         val handleChange: (Event) -> Unit = {
-            value = (it.target as HTMLInputElement).value
-            props.meta.value = value.asValue()
+            props.meta.value = (it.target as HTMLInputElement).value.asValue()
         }
         styledInput(type = InputType.color) {
             css {
@@ -159,7 +152,10 @@ public val ColorValueChooser: FunctionComponent<ValueChooserProps> =
                 margin(0.px)
             }
             attrs {
-                this.value = value
+                this.value = props.actual.value?.let { value ->
+                    if (value.type == ValueType.NUMBER) Colors.rgbToString(value.int)
+                    else value.string
+                } ?: "#000000"
                 onChangeFunction = handleChange
             }
         }

visionforge-threejs/src/main/kotlin/space/kscience/visionforge/solid/three/ThreeFactory.kt

@@ -7,6 +7,7 @@ import space.kscience.dataforge.misc.Type
 import space.kscience.dataforge.names.Name
 import space.kscience.dataforge.names.startsWith
 import space.kscience.visionforge.Vision
+import space.kscience.visionforge.computeProperty
 import space.kscience.visionforge.solid.*
 import space.kscience.visionforge.solid.SolidMaterial.Companion.MATERIAL_KEY
 import space.kscience.visionforge.solid.three.ThreeFactory.Companion.TYPE
@@ -45,6 +46,7 @@ public fun Object3D.updatePosition(obj: Vision) {
  * Update non-position non-geometry property
  */
 public fun Object3D.updateProperty(source: Vision, propertyName: Name) {
+    console.log("$source updated $propertyName with ${source.computeProperty(propertyName)}")
     if (this is Mesh && propertyName.startsWith(MATERIAL_KEY)) {
         updateMaterialProperty(source, propertyName)
     } else if (