Add Trapezioid and scaled to root converter

build.gradle.kts

@@ -1,7 +1,7 @@
 plugins {
     id("ru.mipt.npm.gradle.project")
-    kotlin("multiplatform") version "1.5.30" apply false
+//    kotlin("multiplatform") version "1.5.30" apply false
-    kotlin("js") version "1.5.30" apply false
+//    kotlin("js") version "1.5.30" apply false
 }
 
 val dataforgeVersion by extra("0.5.1")

cern-root-loader/src/commonMain/kotlin/ru/mipt/npm/root/DObject.kt

@@ -85,13 +85,23 @@ public class DGeoVolume(meta: Meta, refCache: DObjectCache) : DNamed(meta, refCa
     public val fFillColor: Int? by meta.int()
 
     override val name: Name by lazy { Name.parse(fName.ifEmpty { "volume[${meta.hashCode().toUInt()}]" }) }
+
+    public val numberOfChildren: Int by lazy {
+        fNodes.sumOf { (it.fVolume?.numberOfChildren ?: 0) + 1 }
+    }
 }
 
 public class DGeoNode(meta: Meta, refCache: DObjectCache) : DNamed(meta, refCache) {
     public val fVolume: DGeoVolume? by dObject(::DGeoVolume)
 }
 
-public class DGeoMatrix(meta: Meta, refCache: DObjectCache) : DNamed(meta, refCache) {
+public open class DGeoMatrix(meta: Meta, refCache: DObjectCache) : DNamed(meta, refCache)
+
+public open class DGeoScale(meta: Meta, refCache: DObjectCache) : DGeoMatrix(meta, refCache) {
+    public val fScale: DoubleArray by meta.doubleArray(1.0, 1.0, 1.0)
+    public val x: Double get() = fScale[0]
+    public val y: Double get() = fScale[1]
+    public val z: Double get() = fScale[2]
 }
 
 

cern-root-loader/src/commonMain/kotlin/ru/mipt/npm/root/dRootToSolid.kt

@@ -182,6 +182,7 @@ private fun SolidGroup.addShape(
             }
         }
         "TGeoPgon" -> {
+            //TODO add a inner polygone layer
             val fDphi by shape.meta.double(0.0)
             val fNz by shape.meta.int(2)
             val fPhi1 by shape.meta.double(360.0)
@@ -219,6 +220,44 @@ private fun SolidGroup.addShape(
         "TGeoBBox" -> {
             box(shape.fDX * 2, shape.fDY * 2, shape.fDZ * 2, name = name, block = block)
         }
+        "TGeoTrap" -> {
+            val fTheta by shape.meta.double(0.0)
+            val fPhi by shape.meta.double(0.0)
+            val fAlpha1 by shape.meta.double(0.0)
+            val fAlpha2 by shape.meta.double(0.0)
+            if (fAlpha1 != 0.0 || fAlpha2 != 0.0 || fTheta != 0.0 || fPhi != 0.0) {
+                TODO("Angled trapezoid not implemented")
+            }
+            val fH1 by shape.meta.double(0.0)
+            val fBl1 by shape.meta.double(0.0)
+            val fTl1 by shape.meta.double(0.0)
+            val fH2 by shape.meta.double(0.0)
+            val fBl2 by shape.meta.double(0.0)
+            val fTl2 by shape.meta.double(0.0)
+
+            val fDz by shape.meta.double(0.0)
+            //TODO check proper node order
+            val node1 = Point3D(-fBl1, -fH1, -fDz)
+            val node2 = Point3D(fBl1, -fH1, -fDz)
+            val node3 = Point3D(fTl1, fH1, -fDz)
+            val node4 = Point3D(-fTl1, fH1, -fDz)
+            val node5 = Point3D(-fBl2, -fH2, fDz)
+            val node6 = Point3D(fBl2, -fH2, fDz)
+            val node7 = Point3D(fTl2, fH2, fDz)
+            val node8 = Point3D(-fTl2, fH2, fDz)
+            hexagon(node1, node2, node3, node4, node5, node6, node7, node8, name)
+        }
+        "TGeoScaledShape" -> {
+            val fShape by shape.dObject(::DGeoShape)
+            val fScale by shape.dObject(::DGeoScale)
+            fShape?.let { scaledShape ->
+                group(name?.let { Name.parse(it) }) {
+                    scale = Point3D(fScale?.x ?: 1.0, fScale?.y ?: 1.0, fScale?.z ?: 1.0)
+                    addShape(scaledShape, context)
+                    apply(block)
+                }
+            }
+        }
         else -> {
             TODO("A shape with type ${shape.typename} not implemented")
         }
@@ -283,7 +322,7 @@ private fun SolidGroup.addRootVolume(
     block: Solid.() -> Unit = {}
 ) {
     //skip if maximum layer number is reached
-    if (context.bottomLayer > context.maxLayer){
+    if (context.bottomLayer > context.maxLayer) {
         println("Maximum layer depth reached. Skipping ${volume.fName}")
         return
     }

demo/gdml/src/jsMain/kotlin/drop/FileDrop.kt

@@ -6,8 +6,8 @@ package drop
 import org.w3c.dom.DragEvent
 import org.w3c.files.FileList
 import react.Component
-import react.RProps
+import react.Props
-import react.RState
+import react.State
 
 external enum class DropEffects {
     copy,
@@ -16,7 +16,7 @@ external enum class DropEffects {
     none
 }
 
-external interface FileDropProps: RProps {
+external interface FileDropProps: Props {
     var className: String?
     var targetClassName: String?
     var draggingOverFrameClassName: String?
@@ -32,7 +32,7 @@ external interface FileDropProps: RProps {
     var dropEffect: DropEffects?
 }
 
-external interface FileDropState: RState {
+external interface FileDropState: State {
     var draggingOverFrame: Boolean
     var draggingOverTarget: Boolean
 }

demo/gdml/src/jsMain/kotlin/space/kscience/visionforge/gdml/demo/GDMLAppComponent.kt

@@ -7,8 +7,11 @@ import kotlinx.css.*
 import org.w3c.files.File
 import org.w3c.files.FileReader
 import org.w3c.files.get
-import react.*
+import react.RProps
 import react.dom.h2
+import react.functionComponent
+import react.useMemo
+import react.useState
 import space.kscience.dataforge.context.Context
 import space.kscience.dataforge.context.fetch
 import space.kscience.dataforge.names.Name
@@ -31,7 +34,7 @@ external interface GDMLAppProps : RProps {
 }
 
 @JsExport
-val GDMLApp = functionalComponent<GDMLAppProps>("GDMLApp") { props ->
+val GDMLApp = functionComponent<GDMLAppProps>("GDMLApp") { props ->
     val visionManager = useMemo(props.context) { props.context.fetch(Solids).visionManager }
     var deferredVision: Deferred<Solid?> by useState {
         CompletableDeferred(props.vision)

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

@@ -3,8 +3,7 @@ import kotlinx.coroutines.isActive
 import kotlinx.coroutines.launch
 import kotlinx.css.*
 import react.RProps
-import react.child
+import react.functionComponent
-import react.functionalComponent
 import space.kscience.dataforge.context.Context
 import space.kscience.plotly.layout
 import space.kscience.plotly.models.Trace
@@ -21,7 +20,7 @@ external interface DemoProps : RProps {
     var context: Context
 }
 
-val GravityDemo = functionalComponent<DemoProps> { props ->
+val GravityDemo = functionComponent<DemoProps> { props ->
     val velocityTrace = Trace{
         name = "velocity"
     }

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

@@ -7,7 +7,7 @@ import org.intellij.markdown.flavours.gfm.GFMFlavourDescriptor
 import org.w3c.dom.Element
 import org.w3c.dom.HTMLElement
 import react.RProps
-import react.functionalComponent
+import react.functionComponent
 import react.useEffect
 import react.useRef
 import space.kscience.visionforge.markup.VisionOfMarkup
@@ -20,7 +20,7 @@ external interface MarkupProps : RProps {
     var markup: VisionOfMarkup?
 }
 
-val Markup = functionalComponent<MarkupProps>("Markup") { props ->
+val Markup = functionComponent<MarkupProps>("Markup") { props ->
     val elementRef = useRef<Element>(null)
 
     useEffect(props.markup, elementRef) {

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

@@ -14,7 +14,7 @@ external interface PlotlyProps : RProps {
 }
 
 
-val Plotly = functionalComponent<PlotlyProps>("Plotly") { props ->
+val Plotly = functionComponent<PlotlyProps>("Plotly") { props ->
     val elementRef = useRef<Element>(null)
 
     useEffect(props.plot, elementRef) {

demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMAppComponent.kt

@@ -7,10 +7,13 @@ import kotlinx.coroutines.DelicateCoroutinesApi
 import kotlinx.coroutines.launch
 import kotlinx.css.*
 import kotlinx.html.js.onClickFunction
-import react.*
+import react.RProps
 import react.dom.attrs
 import react.dom.button
 import react.dom.p
+import react.functionComponent
+import react.useMemo
+import react.useState
 import space.kscience.dataforge.context.Context
 import space.kscience.dataforge.names.Name
 import space.kscience.visionforge.react.flexColumn
@@ -34,7 +37,7 @@ external interface MMAppProps : RProps {
 
 @OptIn(DelicateCoroutinesApi::class)
 @JsExport
-val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
+val MMApp = functionComponent<MMAppProps>("Muon monitor") { props ->
 
     val mmOptions = useMemo {
         Canvas3DOptions {

demo/playground/src/jvmMain/kotlin/rootParser.kt

@@ -10,6 +10,7 @@ import space.kscience.dataforge.meta.isLeaf
 import space.kscience.dataforge.values.string
 import space.kscience.visionforge.solid.Solids
 import java.nio.file.Paths
+import java.util.zip.ZipInputStream
 import kotlin.io.path.writeText
 
 
@@ -25,8 +26,11 @@ fun main() {
         plugin(Solids)
     }
 
-    val string = TGeoManager::class.java.getResourceAsStream("/root/BM@N.root.json")!!
+
-        .readAllBytes().decodeToString()
+    val string = ZipInputStream(TGeoManager::class.java.getResourceAsStream("/root/BM@N_geometry.zip")!!).use {
+        it.nextEntry
+        it.readAllBytes().decodeToString()
+    }
 
     val geo = DGeoManager.parse(string)
 
@@ -50,7 +54,6 @@ fun main() {
 }
 
 
-
 /*            SolidGroup {
                 set(
                     "Coil",

settings.gradle.kts

@@ -1,8 +1,9 @@
 pluginManagement {
 
-    val toolsVersion = "0.10.2"
+    val toolsVersion = "0.10.3"
 
     repositories {
+        mavenLocal()
         maven("https://repo.kotlin.link")
         mavenCentral()
         gradlePluginPortal()
@@ -19,6 +20,7 @@ pluginManagement {
 rootProject.name = "visionforge"
 
 enableFeaturePreview("TYPESAFE_PROJECT_ACCESSORS")
+enableFeaturePreview("VERSION_CATALOGS")
 
 include(
 //    ":ui",

ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/outputConfig.kt

@@ -9,9 +9,12 @@ import kotlinx.html.js.onClickFunction
 import org.w3c.dom.events.Event
 import org.w3c.files.Blob
 import org.w3c.files.BlobPropertyBag
-import react.*
+import react.FunctionComponent
+import react.RBuilder
+import react.RProps
 import react.dom.attrs
 import react.dom.button
+import react.functionComponent
 import space.kscience.dataforge.meta.withDefault
 import space.kscience.visionforge.Vision
 import space.kscience.visionforge.encodeToString
@@ -30,8 +33,8 @@ private fun saveData(event: Event, fileName: String, mimeType: String = "text/pl
     fileSaver.saveAs(blob, fileName)
 }
 
-public fun RBuilder.canvasControls(canvasOptions: Canvas3DOptions, vision: Vision?): ReactElement {
+public fun RBuilder.canvasControls(canvasOptions: Canvas3DOptions, vision: Vision?) {
-    return child(CanvasControls) {
+    child(CanvasControls) {
         attrs {
             this.canvasOptions = canvasOptions
             this.vision = vision
@@ -44,7 +47,7 @@ public external interface CanvasControlsProps : RProps {
     public var vision: Vision?
 }
 
-public val CanvasControls: FunctionComponent<CanvasControlsProps> = functionalComponent("CanvasControls") { props ->
+public val CanvasControls: FunctionComponent<CanvasControlsProps> = functionComponent("CanvasControls") { props ->
     flexColumn {
         flexRow {
             css {

ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/reactBootstrap.kt

@@ -5,7 +5,6 @@ import kotlinx.html.DIV
 import kotlinx.html.id
 import kotlinx.html.js.onClickFunction
 import react.RBuilder
-import react.ReactElement
 import react.dom.*
 import space.kscience.dataforge.names.Name
 import space.kscience.dataforge.names.NameToken
@@ -16,7 +15,7 @@ import styled.styledDiv
 import styled.styledNav
 
 
-public inline fun RBuilder.card(title: String, crossinline block: StyledDOMBuilder<DIV>.() -> Unit): ReactElement =
+public inline fun RBuilder.card(title: String, crossinline block: StyledDOMBuilder<DIV>.() -> Unit): Unit =
     styledDiv {
         css {
             +"card"
@@ -36,7 +35,7 @@ public inline fun RBuilder.card(title: String, crossinline block: StyledDOMBuild
 public fun RBuilder.accordion(
     id: String,
     elements: List<Pair<String, StyledDOMBuilder<DIV>.() -> Unit>>,
-): ReactElement = styledDiv {
+): Unit = styledDiv {
     css {
         +"accordion"
         //+"p-1"
@@ -82,7 +81,7 @@ public fun RBuilder.accordion(
 }
 
 
-public fun RBuilder.nameCrumbs(name: Name?, rootTitle: String, link: (Name) -> Unit): ReactElement = styledNav {
+public fun RBuilder.nameCrumbs(name: Name?, rootTitle: String, link: (Name) -> Unit): Unit = styledNav {
     css {
         +"p-0"
     }
@@ -127,9 +126,9 @@ public fun RSectionsBuilder.entry(title: String, builder: StyledDOMBuilder<DIV>.
     add(title to builder)
 }
 
-public fun RBuilder.accordion(id: String, builder: RSectionsBuilder.() -> Unit): ReactElement {
+public fun RBuilder.accordion(id: String, builder: RSectionsBuilder.() -> Unit): Unit {
     val list = ArrayList<Pair<String, StyledDOMBuilder<DIV>.() -> Unit>>().apply(builder)
-    return accordion(id, list)
+    accordion(id, list)
 }
 
 public enum class ContainerSize(public val suffix: String) {
@@ -144,7 +143,7 @@ public enum class ContainerSize(public val suffix: String) {
 public inline fun RBuilder.container(
     size: ContainerSize = ContainerSize.FLUID,
     block: StyledDOMBuilder<DIV>.() -> Unit,
-): ReactElement = styledDiv {
+): Unit = styledDiv {
     css {
         classes.add("container${size.suffix}")
     }
@@ -164,7 +163,7 @@ public inline fun RBuilder.gridColumn(
     weight: Int? = null,
     maxSize: GridMaxSize = GridMaxSize.NONE,
     block: StyledDOMBuilder<DIV>.() -> Unit,
-): ReactElement = styledDiv {
+): Unit = styledDiv {
     val weightSuffix = weight?.let { "-$it" } ?: ""
     css {
         classes.add("col${maxSize.suffix}$weightSuffix")
@@ -174,7 +173,7 @@ public inline fun RBuilder.gridColumn(
 
 public inline fun RBuilder.gridRow(
     block: StyledDOMBuilder<DIV>.() -> Unit,
-): ReactElement = styledDiv {
+): Unit = styledDiv {
     css {
         classes.add("row")
     }

ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/tabComponent.kt

@@ -12,22 +12,22 @@ import space.kscience.visionforge.react.flexColumn
 import styled.StyledDOMBuilder
 import styled.styledDiv
 
-public external class TabProps : RProps {
+public external interface TabProps : PropsWithChildren {
     public var id: String
     public var title: String?
 }
 
 @JsExport
-public val Tab: FunctionComponent<TabProps> = functionalComponent { props ->
+public val Tab: FunctionComponent<TabProps> = functionComponent { props ->
     props.children()
 }
 
-public external class TabPaneProps : RProps {
+public external interface TabPaneProps : PropsWithChildren {
     public var activeTab: String?
 }
 
 @JsExport
-public val TabPane: FunctionComponent<TabPaneProps> = functionalComponent("TabPane") { props ->
+public val TabPane: FunctionComponent<TabPaneProps> = functionComponent("TabPane") { props ->
     var activeTab: String? by useState(props.activeTab)
 
     val children: Array<out ReactElement?> = Children.map(props.children) {

ui/bootstrap/src/main/kotlin/space/kscience/visionforge/bootstrap/threeControls.kt

@@ -2,8 +2,11 @@ package space.kscience.visionforge.bootstrap
 
 import kotlinx.css.*
 import kotlinx.css.properties.border
-import react.*
+import react.FunctionComponent
+import react.RBuilder
+import react.RProps
 import react.dom.h2
+import react.functionComponent
 import space.kscience.dataforge.names.Name
 import space.kscience.dataforge.names.isEmpty
 import space.kscience.visionforge.Vision
@@ -21,7 +24,7 @@ public external interface ThreeControlsProps : RProps {
 }
 
 @JsExport
-public val ThreeControls: FunctionComponent<ThreeControlsProps> = functionalComponent { props ->
+public val ThreeControls: FunctionComponent<ThreeControlsProps> = functionComponent { props ->
     tabPane(if (props.selected != null) "Properties" else null) {
         tab("Canvas") {
             card("Canvas configuration") {
@@ -67,7 +70,7 @@ public fun RBuilder.threeControls(
     selected: Name?,
     onSelect: (Name) -> Unit = {},
     builder: TabBuilder.() -> Unit = {},
-): ReactElement = child(ThreeControls) {
+): Unit = child(ThreeControls) {
     attrs {
         this.canvasOptions = canvasOptions
         this.vision = vision

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

@@ -42,7 +42,7 @@ public external interface MetaViewerProps : RProps {
     public var descriptor: MetaDescriptor?
 }
 
-private val MetaViewerItem: FunctionComponent<MetaViewerProps> = functionalComponent("MetaViewerItem") { props ->
+private val MetaViewerItem: FunctionComponent<MetaViewerProps> = functionComponent("MetaViewerItem") { props ->
     metaViewerItem(props)
 }
 
@@ -127,8 +127,7 @@ private fun RBuilder.metaViewerItem(props: MetaViewerProps) {
 }
 
 @JsExport
-public val MetaViewer: FunctionComponent<MetaViewerProps> =
+public val MetaViewer: FunctionComponent<MetaViewerProps> = functionComponent("MetaViewer") { props ->
-    functionalComponent<MetaViewerProps>("MetaViewer") { props ->
     child(MetaViewerItem) {
         attrs {
             this.key = ""
@@ -137,7 +136,7 @@ public val MetaViewer: FunctionComponent<MetaViewerProps> =
             this.descriptor = props.descriptor
         }
     }
-    }
+}
 
 public fun RBuilder.metaViewer(meta: Meta, descriptor: MetaDescriptor? = null, key: Any? = null) {
     child(MetaViewer) {

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

@@ -9,14 +9,14 @@ import react.FunctionComponent
 import react.dom.attrs
 import react.dom.option
 import react.dom.select
-import react.functionalComponent
+import react.functionComponent
 import space.kscience.dataforge.meta.descriptors.allowedValues
 import space.kscience.dataforge.values.asValue
 import space.kscience.dataforge.values.string
 
 @JsExport
 public val MultiSelectChooser: FunctionComponent<ValueChooserProps> =
-    functionalComponent("MultiSelectChooser") { props ->
+    functionComponent("MultiSelectChooser") { props ->
         val onChange: (Event) -> Unit = { event: Event ->
             val newSelected = (event.target as HTMLSelectElement).selectedOptions.asList()
                 .map { (it as HTMLOptionElement).value.asValue() }

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

@@ -48,7 +48,7 @@ public external interface PropertyEditorProps : RProps {
 }
 
 private val PropertyEditorItem: FunctionComponent<PropertyEditorProps> =
-    functionalComponent("PropertyEditorItem") { props ->
+    functionComponent("PropertyEditorItem") { props ->
         propertyEditorItem(props)
     }
 
@@ -193,7 +193,7 @@ private fun RBuilder.propertyEditorItem(props: PropertyEditorProps) {
 }
 
 @JsExport
-public val PropertyEditor: FunctionComponent<PropertyEditorProps> = functionalComponent("PropertyEditor") { props ->
+public val PropertyEditor: FunctionComponent<PropertyEditorProps> = functionComponent("PropertyEditor") { props ->
     child(PropertyEditorItem) {
         attrs {
             this.key = ""

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

@@ -8,7 +8,7 @@ import org.w3c.dom.HTMLInputElement
 import org.w3c.dom.events.Event
 import react.FunctionComponent
 import react.dom.attrs
-import react.functionalComponent
+import react.functionComponent
 import react.useState
 import space.kscience.dataforge.meta.descriptors.ValueRequirement
 import space.kscience.dataforge.meta.double
@@ -20,7 +20,7 @@ import styled.styledInput
 
 @JsExport
 public val RangeValueChooser: FunctionComponent<ValueChooserProps> =
-    functionalComponent("RangeValueChooser") { props ->
+    functionComponent("RangeValueChooser") { props ->
         var innerValue by useState(props.actual.double)
         var rangeDisabled: Boolean by useState(props.meta.value == null)
 

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

@@ -21,7 +21,7 @@ public external interface ThreeCanvasProps : RProps {
     public var selected: Name?
 }
 
-public val ThreeCanvasComponent: FunctionComponent<ThreeCanvasProps> = functionalComponent(
+public val ThreeCanvasComponent: FunctionComponent<ThreeCanvasProps> = functionComponent(
     "ThreeCanvasComponent"
 ) { props ->
     val elementRef = useRef<Element>(null)

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

@@ -28,7 +28,7 @@ public external interface ObjectTreeProps : RProps {
     public var clickCallback: (Name) -> Unit
 }
 
-private val TreeLabel = functionalComponent<ObjectTreeProps> { props ->
+private val TreeLabel = functionComponent<ObjectTreeProps> { props ->
     val token = useMemo(props.name) { props.name.lastOrNull()?.toString() ?: "World" }
     styledSpan {
         css {
@@ -107,7 +107,7 @@ private fun RBuilder.visionTree(props: ObjectTreeProps): Unit {
 }
 
 @JsExport
-public val ObjectTree: FunctionComponent<ObjectTreeProps> = functionalComponent("ObjectTree") { props ->
+public val ObjectTree: FunctionComponent<ObjectTreeProps> = functionComponent("ObjectTree") { props ->
     visionTree(props)
 }
 

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

@@ -6,14 +6,13 @@ import kotlinx.css.display
 import kotlinx.css.flexDirection
 import kotlinx.html.DIV
 import react.RBuilder
-import react.ReactElement
 import styled.StyledDOMBuilder
 import styled.css
 import styled.styledDiv
 
 public inline fun RBuilder.flexColumn(
     block: StyledDOMBuilder<DIV>.() -> Unit
-): ReactElement = styledDiv {
+): Unit = styledDiv {
     css {
         display = Display.flex
         flexDirection = FlexDirection.column
@@ -23,7 +22,7 @@ public inline fun RBuilder.flexColumn(
 
 public inline fun RBuilder.flexRow(
     block: StyledDOMBuilder<DIV>.() -> Unit
-): ReactElement = styledDiv {
+): Unit = styledDiv {
     css {
         display = Display.flex
         flexDirection = FlexDirection.row

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

@@ -10,9 +10,12 @@ import kotlinx.html.js.onKeyDownFunction
 import org.w3c.dom.HTMLInputElement
 import org.w3c.dom.HTMLSelectElement
 import org.w3c.dom.events.Event
-import react.*
+import react.FunctionComponent
+import react.RProps
 import react.dom.attrs
 import react.dom.option
+import react.functionComponent
+import react.useState
 import space.kscience.dataforge.meta.*
 import space.kscience.dataforge.meta.descriptors.MetaDescriptor
 import space.kscience.dataforge.meta.descriptors.allowedValues
@@ -34,7 +37,7 @@ public external interface ValueChooserProps : RProps {
 
 @JsExport
 public val StringValueChooser: FunctionComponent<ValueChooserProps> =
-    functionalComponent("StringValueChooser") { props ->
+    functionComponent("StringValueChooser") { props ->
         var value by useState(props.actual.string ?: "")
         val keyDown: (Event) -> Unit = { event ->
             if (event.type == "keydown" && event.asDynamic().key == "Enter") {
@@ -59,7 +62,7 @@ public val StringValueChooser: FunctionComponent<ValueChooserProps> =
 
 @JsExport
 public val BooleanValueChooser: FunctionComponent<ValueChooserProps> =
-    functionalComponent("BooleanValueChooser") { props ->
+    functionComponent("BooleanValueChooser") { props ->
         val handleChange: (Event) -> Unit = {
             val newValue = (it.target as HTMLInputElement).checked
             props.meta.value = newValue.asValue()
@@ -78,7 +81,7 @@ public val BooleanValueChooser: FunctionComponent<ValueChooserProps> =
 
 @JsExport
 public val NumberValueChooser: FunctionComponent<ValueChooserProps> =
-    functionalComponent("NumberValueChooser") { props ->
+    functionComponent("NumberValueChooser") { props ->
         var innerValue by useState(props.actual.string ?: "")
         val keyDown: (Event) -> Unit = { event ->
             if (event.type == "keydown" && event.asDynamic().key == "Enter") {
@@ -117,7 +120,7 @@ public val NumberValueChooser: FunctionComponent<ValueChooserProps> =
 
 @JsExport
 public val ComboValueChooser: FunctionComponent<ValueChooserProps> =
-    functionalComponent("ComboValueChooser") { props ->
+    functionComponent("ComboValueChooser") { props ->
         var selected by useState(props.actual.string ?: "")
         val handleChange: (Event) -> Unit = {
             selected = (it.target as HTMLSelectElement).value
@@ -142,7 +145,7 @@ public val ComboValueChooser: FunctionComponent<ValueChooserProps> =
 
 @JsExport
 public val ColorValueChooser: FunctionComponent<ValueChooserProps> =
-    functionalComponent("ColorValueChooser") { props ->
+    functionComponent("ColorValueChooser") { props ->
         val handleChange: (Event) -> Unit = {
             props.meta.value = (it.target as HTMLInputElement).value.asValue()
         }
@@ -162,7 +165,7 @@ public val ColorValueChooser: FunctionComponent<ValueChooserProps> =
     }
 
 @JsExport
-public val ValueChooser: FunctionComponent<ValueChooserProps> = functionalComponent("ValueChooser") { props ->
+public val ValueChooser: FunctionComponent<ValueChooserProps> = functionComponent("ValueChooser") { props ->
     val rawInput by useState(false)
 
     val descriptor = props.descriptor

ui/ring/src/main/kotlin/ringui/Loader.kt

@@ -4,10 +4,11 @@
 package ringui
 
 import react.ComponentClass
-import react.dom.WithClassName
+import react.PropsWithClassName
+
 
 // https://github.com/JetBrains/ring-ui/blob/master/components/loader/loader.js
-public external interface LoaderProps : WithClassName {
+public external interface LoaderProps : PropsWithClassName {
     public var size: Number
     public var colors: Array<String>
     public var message: String

ui/ring/src/main/kotlin/ringui/LoaderScreen.kt

@@ -4,10 +4,10 @@
 package ringui
 
 import react.ComponentClass
-import react.dom.WithClassName
+import react.PropsWithClassName
 
 // https://github.com/JetBrains/ring-ui/blob/master/components/loader-screen/loader-screen.js
-public external interface LoaderScreenProps : WithClassName {
+public external interface LoaderScreenProps : PropsWithClassName {
     public var containerClassName: String
     public var message: String
 }

ui/ring/src/main/kotlin/space.kscience.visionforge.ring/ThreeViewWithControls.kt

@@ -43,7 +43,7 @@ public fun ThreeCanvasWithControlsProps.tab(title: String, block: RBuilder.() ->
 }
 
 
-public fun RBuilder.nameCrumbs(name: Name?, link: (Name) -> Unit): ReactElement = styledDiv {
+public fun RBuilder.nameCrumbs(name: Name?, link: (Name) -> Unit): Unit = styledDiv {
     div {
         Link {
             attrs {
@@ -77,7 +77,7 @@ public fun RBuilder.nameCrumbs(name: Name?, link: (Name) -> Unit): ReactElement
 
 @JsExport
 public val ThreeCanvasWithControls: FunctionComponent<ThreeCanvasWithControlsProps> =
-    functionalComponent("ThreeViewWithControls") { props ->
+    functionComponent("ThreeViewWithControls") { props ->
         var selected by useState { props.selected }
         var solid: Solid? by useState(null)
 

ui/ring/src/main/kotlin/space.kscience.visionforge.ring/ringThreeControls.kt

@@ -9,9 +9,12 @@ import kotlinx.html.js.onClickFunction
 import org.w3c.dom.events.Event
 import org.w3c.files.Blob
 import org.w3c.files.BlobPropertyBag
-import react.*
+import react.FunctionComponent
+import react.RBuilder
+import react.RProps
 import react.dom.attrs
 import react.dom.button
+import react.functionComponent
 import ringui.Island
 import ringui.SmartTabs
 import ringui.Tab
@@ -35,8 +38,8 @@ internal fun saveData(event: Event, fileName: String, mimeType: String = "text/p
     fileSaver.saveAs(blob, fileName)
 }
 
-internal fun RBuilder.canvasControls(options: Canvas3DOptions, vision: Vision?): ReactElement {
+internal fun RBuilder.canvasControls(options: Canvas3DOptions, vision: Vision?): Unit {
-    return child(CanvasControls) {
+    child(CanvasControls) {
         attrs {
             this.options = options
             this.vision = vision
@@ -49,7 +52,7 @@ internal external interface CanvasControlsProps : RProps {
     public var vision: Vision?
 }
 
-internal val CanvasControls: FunctionComponent<CanvasControlsProps> = functionalComponent("CanvasControls") { props ->
+internal val CanvasControls: FunctionComponent<CanvasControlsProps> = functionComponent("CanvasControls") { props ->
     flexColumn {
         flexRow {
             css {
@@ -91,7 +94,7 @@ public external interface ThreeControlsProps : RProps {
 }
 
 @JsExport
-public val ThreeControls: FunctionComponent<ThreeControlsProps> = functionalComponent { props ->
+public val ThreeControls: FunctionComponent<ThreeControlsProps> = functionComponent { props ->
     SmartTabs("Tree") {
         props.vision?.let {
             Tab("Tree") {
@@ -119,7 +122,7 @@ public fun RBuilder.ringThreeControls(
     selected: Name?,
     onSelect: (Name?) -> Unit = {},
     additionalTabs: Map<String, RBuilder.() -> Unit>? = null
-): ReactElement = child(ThreeControls) {
+): Unit = child(ThreeControls) {
     attrs {
         this.canvasOptions = canvasOptions
         this.vision = vision