dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/editor/ObjectTreeComponent.kt

@@ -90,12 +90,14 @@ class ObjectTreeComponent : RComponent<ObjectTreeProps, TreeState>() {
 fun RBuilder.objectTree(
     obj: VisualObject,
     clickCallback: (Name) -> Unit = {}
-) = child(ObjectTreeComponent::class) {
+) = card("Object tree") {
+    child(ObjectTreeComponent::class) {
         attrs {
             name = Name.EMPTY
             this.obj = obj
             this.clickCallback = clickCallback
         }
+    }
 }
 
 fun Element.objectTree(

dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/VisualGroup3D.kt

@@ -124,10 +124,10 @@ inline fun VisualGroup3D.prototypes(builder: VisualGroup3D.() -> Unit): Unit {
 }
 
 /**
- * Define a group with given [key], attach it to this parent and return it.
+ * Define a group with given [name], attach it to this parent and return it.
  */
-fun VisualGroup3D.group(key: String = "", action: VisualGroup3D.() -> Unit = {}): VisualGroup3D =
+fun VisualGroup3D.group(name: String = "", action: VisualGroup3D.() -> Unit = {}): VisualGroup3D =
     VisualGroup3D().apply(action).also {
-        set(key, it)
+        set(name, it)
     }
 

playground/src/jsMain/kotlin/PlayGroundApp.kt

@@ -25,10 +25,10 @@ private class PlayGroundApp : Application {
             document.getElementById("app") as? HTMLElement ?: error("Element with id 'canvas' not found on page")
 
         val obj = VisualGroup3D().apply {
-            box(100, 100, 100)
-            group {
+            box(100, 100, 100, name = "A")
+            group("B") {
                 position = Point3D(120, 0, 0)
-                box(100, 100, 100)
+                box(100, 100, 100, name = "C")
             }
         }