Skip to content

Use JsonTree in network detail view #478

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rteyssandier merged 3 commits into from
Jan 26, 2026
Merged

Use JsonTree in network detail view #478

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c455e5e
Use JsonTree in network detail screen
snappdevelopment Jan 11, 2026
8923acb
Add background
snappdevelopment Jan 11, 2026
8ff5773
Add key to remember
snappdevelopment Jan 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 54 additions & 28 deletions ...tlin/io/github/openflocon/flocondesktop/features/network/detail/view/NetworkDetailView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import androidx.compose.material.icons.outlined.OpenInFull
import androidx.compose.material.icons.outlined.Share
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
Expand All @@ -37,6 +38,7 @@ import coil3.compose.AsyncImage
import coil3.network.NetworkHeaders
import coil3.network.httpHeaders
import coil3.request.ImageRequest
import com.sebastianneubauer.jsontree.TreeState
import io.github.openflocon.flocondesktop.features.network.detail.NetworkDetailAction
import io.github.openflocon.flocondesktop.features.network.detail.NetworkDetailViewModel
import io.github.openflocon.flocondesktop.features.network.detail.model.NetworkDetailViewState
Expand All @@ -51,6 +53,7 @@ import io.github.openflocon.library.designsystem.components.FloconButton
import io.github.openflocon.library.designsystem.components.FloconCodeBlock
import io.github.openflocon.library.designsystem.components.FloconHorizontalDivider
import io.github.openflocon.library.designsystem.components.FloconIconButton
import io.github.openflocon.library.designsystem.components.FloconJsonTree
import io.github.openflocon.library.designsystem.components.FloconLineDescription
import io.github.openflocon.library.designsystem.components.FloconSection
import io.github.openflocon.library.designsystem.components.FloconVerticalScrollbar
Expand All @@ -60,7 +63,7 @@ import org.jetbrains.compose.ui.tooling.preview.Preview
import org.koin.compose.viewmodel.koinViewModel
import org.koin.core.parameter.parametersOf

private const val LARGE_BODY_LENGHT = 30_000
private const val LARGE_BODY_LENGTH = 1_000_000

@Composable
fun NetworkDetailScreen(
Expand Down Expand Up @@ -333,7 +336,7 @@ private fun Request(
modifier = Modifier.fillMaxWidth()
) {
var displayBody by remember(state.requestBody) {
val isLargeResponse = state.requestBody.length > LARGE_BODY_LENGHT
val isLargeResponse = state.requestBody.length > LARGE_BODY_LENGTH
mutableStateOf(!isLargeResponse)
}
if (!displayBody) {
Expand Down Expand Up @@ -476,45 +479,68 @@ private fun Response(
},
modifier = Modifier.fillMaxWidth()
) {
var displayBody by remember(response.body) {
val isLargeResponse = response.body.length > LARGE_BODY_LENGHT
mutableStateOf(!isLargeResponse)
}
if (!displayBody) {
Column(
var jsonError by remember(response.body) { mutableStateOf(false) }

if(!jsonError) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(600.dp)
.padding(12.dp)
.background(
FloconTheme.colorPalette.secondary,
shape = FloconTheme.shapes.medium,
)
.padding(12.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Response body too large (${response.size} bytes)",
color = FloconTheme.colorPalette.onPrimary,
style = FloconTheme.typography.bodySmall,
FloconJsonTree(
json = response.body,
initialState = TreeState.EXPANDED,
onError = { jsonError = true },
modifier = Modifier.fillMaxSize()
)
Spacer(modifier = Modifier.height(8.dp))
FloconButton(
onClick = {
displayBody = true
},
containerColor = FloconTheme.colorPalette.tertiary,
}
} else {
var displayBody by remember(response.body) {
val isLargeResponse = response.body.length > LARGE_BODY_LENGTH
mutableStateOf(!isLargeResponse)
}
if (!displayBody) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(12.dp)
.background(
FloconTheme.colorPalette.secondary,
shape = FloconTheme.shapes.medium,
)
.padding(12.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text("Display anyway")
Text(
text = "Response body too large (${response.size} bytes)",
color = FloconTheme.colorPalette.onPrimary,
style = FloconTheme.typography.bodySmall,
)
Spacer(modifier = Modifier.height(8.dp))
FloconButton(
onClick = {
displayBody = true
},
containerColor = FloconTheme.colorPalette.tertiary,
) {
Text("Display anyway")
}
}
} else {
FloconCodeBlock(
code = response.body,
containerColor = FloconTheme.colorPalette.secondary,
modifier = Modifier
.fillMaxWidth()
.padding(12.dp)
)
}
} else {
FloconCodeBlock(
code = response.body,
containerColor = FloconTheme.colorPalette.secondary,
modifier = Modifier
.fillMaxWidth()
.padding(12.dp)
)
}
}
}
Expand Down
3 changes: 3 additions & 0 deletions .../commonMain/kotlin/io/github/openflocon/library/designsystem/components/FloconJsonTree.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import androidx.compose.material.icons.outlined.ChevronLeft
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.sebastianneubauer.jsontree.JsonTree
import com.sebastianneubauer.jsontree.TreeState
import com.sebastianneubauer.jsontree.defaultDarkColors
import com.sebastianneubauer.jsontree.search.SearchState
import com.sebastianneubauer.jsontree.search.rememberSearchState
Expand All @@ -15,6 +16,7 @@ import com.sebastianneubauer.jsontree.search.rememberSearchState
fun FloconJsonTree(
json: String,
modifier: Modifier = Modifier,
initialState: TreeState = TreeState.FIRST_ITEM_EXPANDED,
onError: (Throwable) -> Unit = {},
searchState: SearchState = rememberSearchState()
) {
Expand All @@ -24,6 +26,7 @@ fun FloconJsonTree(
onLoading = {
FloconCircularProgressIndicator() // TODO Better?
},
initialState = initialState,
icon = Icons.Outlined.ChevronLeft,
searchState = searchState,
colors = defaultDarkColors,
Expand Down