Jetpack Compose internal error on Android

[kevincianfarini]

I have a simple codepath I’m calling which was ripped from one of the demos.

val figure = run {
    val data = mapOf(
        "time" to listOf("Lunch", "Lunch", "Dinner", "Dinner", "Dinner")
    )

    letsPlot(data) + geomBar(alpha = 0.5) {
        x = "time"
        color = "time"
        fill = "time"
    }
}
PlotPanel(figure = figure, modifier = Modifier.fillMaxSize()) {

}

When I run this I experience the following error.

16:46:17.818  E  FATAL EXCEPTION: main
                 Process: energy.octopus.octopusenergy.android.dev, PID: 16766
                 androidx.compose.runtime.ComposeRuntimeError: Compose Runtime internal error. Unexpected or incorrect use of the Compose internal runtime API (pending composition has not been applied). Please report to Google or use https://goo.gle/compose-feedback
                 	at androidx.compose.runtime.ComposerKt.composeRuntimeError(Composer.kt:4187)
                 	at androidx.compose.runtime.CompositionImpl.drainPendingModificationsForCompositionLocked(Composition.kt:679)
                 	at androidx.compose.runtime.CompositionImpl.composeContent(Composition.kt:717)
                 	at androidx.compose.runtime.Recomposer.composeInitial$runtime_release(Recomposer.kt:1071)
                 	at androidx.compose.runtime.ComposerImpl$CompositionContextImpl.composeInitial$runtime_release(Composer.kt:3599)
                 	at androidx.compose.runtime.CompositionImpl.composeInitial(Composition.kt:633)
                 	at androidx.compose.runtime.CompositionImpl.setContent(Composition.kt:619)
                 	at androidx.compose.ui.layout.LayoutNodeSubcompositionsState.subcomposeInto(SubcomposeLayout.kt:721)
                 	at androidx.compose.ui.layout.LayoutNodeSubcompositionsState.subcompose(SubcomposeLayout.kt:694)
                 	at androidx.compose.ui.layout.LayoutNodeSubcompositionsState.subcompose(SubcomposeLayout.kt:685)
                 	at androidx.compose.ui.layout.LayoutNodeSubcompositionsState.subcompose(SubcomposeLayout.kt:669)
                 	at androidx.compose.ui.layout.LayoutNodeSubcompositionsState$Scope.subcompose(SubcomposeLayout.kt:1014)
                 	at androidx.compose.material.ScaffoldKt$ScaffoldLayout$1$1$1.invoke(Scaffold.kt:320)
                 	at androidx.compose.material.ScaffoldKt$ScaffoldLayout$1$1$1.invoke(Scaffold.kt:243)
                 	at androidx.compose.ui.layout.MeasureScope$layout$1.placeChildren(MeasureScope.kt:70)
                 	at androidx.compose.ui.layout.LayoutNodeSubcompositionsState$createMeasurePolicy$1$measure$1.placeChildren(SubcomposeLayout.kt:879)
                 	at androidx.compose.ui.node.LayoutNodeLayoutDelegate$MeasurePassDelegate$layoutChildren$1$1.invoke(LayoutNodeLayoutDelegate.kt:365)
                 	at androidx.compose.ui.node.LayoutNodeLayoutDelegate$MeasurePassDelegate$layoutChildren$1$1.invoke(LayoutNodeLayoutDelegate.kt:357)
                 	at androidx.compose.runtime.snapshots.Snapshot$Companion.observe(Snapshot.kt:2303)

Is this a known issue?

[IKupriyanov-HORIS]

Hi! Could you provide full repro project?

I tried to reproduce this issue, but my repro with Scaffold and your plot snippet works fine without any errors:

• Scaffold example took from here
• My repro is based on this demo
• added material3 dependency to build.gradle.kts: implementation ("androidx.compose.material3:material3:1.2.1")

MainActivity.kt

/*
 * Copyright (c) 2023 JetBrains s.r.o.
 * Use of this source code is governed by the MIT license that can be found in the LICENSE file.
 */

package demo.plot

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.*
import androidx.compose.material3.TopAppBarDefaults.topAppBarColors
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import ch.qos.logback.classic.android.BasicLogcatConfigurator
import org.jetbrains.letsPlot.geom.geomBar
import org.jetbrains.letsPlot.letsPlot
import org.jetbrains.letsPlot.skia.compose.PlotPanel

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            ScaffoldExample()
        }
    }

    private companion object {
        init {
            BasicLogcatConfigurator.configureDefaultContext()
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScaffoldExample() {
    var presses by remember { mutableIntStateOf(0) }

    Scaffold(
        topBar = {
            TopAppBar(
                colors = topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Top app bar")
                }
            )
        },
        bottomBar = {
            BottomAppBar(
                containerColor = MaterialTheme.colorScheme.primaryContainer,
                contentColor = MaterialTheme.colorScheme.primary,
            ) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    text = "Bottom app bar",
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { presses++ }) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding),
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            val figure = run {
                val data = mapOf(
                    "time" to listOf("Lunch", "Lunch", "Dinner", "Dinner", "Dinner")
                )

                letsPlot(data) + geomBar(alpha = 0.5) {
                    x = "time"
                    color = "time"
                    fill = "time"
                }
            }
            PlotPanel(figure = figure, modifier = Modifier.fillMaxSize()) {

            }
        }
    }
}

Screenshot

[alshan]

Hi @kevincianfarini It's possible there is some incompatibility between the version of Compose Multiplatform we are using to build Lets-Plot and the version of Jetpack Compose you are using in your project. Our latest release is built with Compose Multiplatform 1.6.1 According to the Jetpack Compose and Compose Multiplatform release cycles, CMP 1.6.1 is compatible with Jetpack Compose v1.6.3 and Jetpack Compose Material3 v1.2.1.

Could you try to configure accordingly and try again?

Also, you can checkout https://github.com/JetBrains/lets-plot-compose-demos from GitHub and try to run its examples. Are they running successfully?