Add manual coroutine scope for plotly JS render.

Author: altavir

plotly-kt/plotly-kt-core/src/commonMain/kotlin/space/kscience/plotly/Plot.kt

@@ -80,8 +80,9 @@ public class Plot : AbstractVision(), MutableVisionGroup<Trace> {
      */
     @UnstablePlotlyAPI
     @JvmSynchronized
-    internal fun removeTrace(index: Int) {
+    public fun removeTrace(index: Int) {
         _data.removeAt(index)
+        emitEvent(VisionGroupCompositionChangedEvent(NameToken("trace", _data.size.toString()), null))
     }
 
     override val descriptor: MetaDescriptor get() = Companion.descriptor

plotly-kt/plotly-kt-core/src/commonMain/kotlin/space/kscience/plotly/Plotly.kt

@@ -8,9 +8,11 @@ import space.kscience.dataforge.context.ContextAware
 import space.kscience.dataforge.context.request
 import space.kscience.dataforge.meta.*
 import space.kscience.dataforge.names.Name
+import space.kscience.dataforge.names.asName
 import space.kscience.plotly.models.Trace
 import space.kscience.visionforge.VisionBuilder
-import space.kscience.visionforge.html.*
+import space.kscience.visionforge.html.VisionOutput
+import space.kscience.visionforge.html.VisionTagConsumer
 import kotlin.js.JsName
 
 /**
@@ -65,6 +67,18 @@ public class PlotlyConfig : Scheme() {
     public var responsive: Boolean? by boolean()
     public var imageFormat: String? by string(Name.parse("toImageButtonOptions.format"))
 
+    /**
+     * A list of class names applied to the output `div` in the generated HTML for the plot.
+     *
+     * This property allows customization of the CSS classes assigned to the `div` element
+     * that contains the rendered plot. It can be utilized to add custom styling or specific
+     * class-based behaviors to the output.
+     *
+     * By default, this property is initialized as an empty list and can be updated to include
+     * necessary class names as strings.
+     */
+    public var classes: List<String> by stringList(default = emptyArray(), key = VisionTagConsumer.OUTPUT_DIV_CLASSES_KEY.asName())
+
     public fun withEditorButton() {
         showEditInChartStudio = true
         plotlyServerURL = "https://chart-studio.plotly.com"

plotly-kt/plotly-kt-core/src/jsMain/kotlin/space/kscience/plotly/PlotlyElement.kt

@@ -1,5 +1,6 @@
 package space.kscience.plotly
 
+import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.DelicateCoroutinesApi
 import kotlinx.coroutines.GlobalScope
 import kotlinx.coroutines.flow.filterIsInstance
@@ -32,7 +33,11 @@ private fun List<MetaRepr>.toDynamic(): Array<dynamic> = map { it.toDynamic() }.
  * Attach a plot to this element or update the existing plot
  */
 @OptIn(DelicateCoroutinesApi::class)
-public fun Element.plot(plotlyConfig: PlotlyConfig = PlotlyConfig(), plot: Plot) {
+public fun Element.plot(
+    plotlyConfig: PlotlyConfig,
+    plot: Plot,
+    scope: CoroutineScope = plot.manager?.context ?: GlobalScope
+) {
 
 //    console.info("""
 //                        Plotly.react(
@@ -51,7 +56,7 @@ public fun Element.plot(plotlyConfig: PlotlyConfig = PlotlyConfig(), plot: Plot)
     )
 
     //start updates
-    val listenJob = (plot.manager?.context ?: GlobalScope).launch {
+    val listenJob = scope.launch {
         plot.data.forEachIndexed { index, trace ->
             trace.eventFlow.filterIsInstance<VisionPropertyChangedEvent>().onEach { event ->
                 val traceData = trace.toDynamic()
@@ -92,27 +97,34 @@ public fun Element.plot(plot: Plot, plotlyConfig: PlotlyConfig = PlotlyConfig())
 /**
  * Create a plot in this element
  */
-public inline fun Element.plot(plotlyConfig: PlotlyConfig = PlotlyConfig(), plotBuilder: Plot.() -> Unit) {
-    plot(plotlyConfig, Plot().apply(plotBuilder))
+public inline fun Element.plot(
+    scope: CoroutineScope,
+    plotlyConfig: PlotlyConfig = PlotlyConfig(),
+    plotBuilder: Plot.() -> Unit
+) {
+    plot(plotlyConfig, Plot().apply(plotBuilder), scope)
 }
 
 public class PlotlyElement(public val div: HTMLElement)
 
 /**
- * Create a div element and render plot in it
+ * Create a div element and render the plot in it
  */
+@OptIn(DelicateCoroutinesApi::class)
 public fun TagConsumer<HTMLElement>.plotDiv(
-    plotlyConfig: PlotlyConfig = PlotlyConfig(),
+    plotlyConfig: PlotlyConfig,
     plot: Plot,
+    scope: CoroutineScope = plot.manager?.context ?: GlobalScope,
 ): PlotlyElement = PlotlyElement(div("plotly-kt-plot").apply { plot(plotlyConfig, plot) })
 
 /**
  * Render plot in the HTML element using direct plotly API.
  */
 public inline fun TagConsumer<HTMLElement>.plotDiv(
+    scope: CoroutineScope,
     plotlyConfig: PlotlyConfig = PlotlyConfig(),
     plotBuilder: Plot.() -> Unit,
-): PlotlyElement = PlotlyElement(div("plotly-kt-plot").apply { plot(plotlyConfig, plotBuilder) })
+): PlotlyElement = PlotlyElement(div("plotly-kt-plot").apply { plot(scope, plotlyConfig, plotBuilder) })
 
 @OptIn(ExperimentalSerializationApi::class)
 public fun PlotlyElement.on(eventType: PlotlyEventListenerType, block: MouseEvent.(PlotlyEvent) -> Unit) {