Skip to content
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.

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

feat: Add editorHeight option #141

Merged
merged 3 commits into from
Jun 26, 2024
Merged

feat: Add editorHeight option #141

merged 3 commits into from
Jun 26, 2024

Conversation

gadenbuie
Copy link
Contributor

@gadenbuie gadenbuie commented Jun 13, 2024

This PR builds on #140 to incorporate an editorHeight option. Editor height has the same semantics as viewerHeight (hence the dependency on #140), where users can provide a numeric value taken as pixels or a string, taken as a CSS value.

I updated the following layouts to use editorHeight

  1. editor-viewer

    • In a vertical layout, editorHeight and viewerHeight are supplied to grid-template-rows. In other words, the editor and viewer are independently sized. The default value is auto, 200px (editor, viewer).
    • In a horizontal layout, the editor and viewer are next to each other. In this case, setting either editorHeight or viewerHeight can constrain the overall height of the component. If both are set (to values other than auto), we take the minimum height of the two.
  2. editor-terminal-viewer

    • This app mode is functionally equivalent to editor-viewer in a horizontal layout, but we apply the height to the .shinylive-container element, leaving grid-template-rows to determine the relative size of the editor/terminal cells. If either are set, we apply the height constrain to the overall component, using the minimum if both are set.
  3. editor-terminal

    • Applies editorHeight to the overall component via grid-template-rows. Sidenote: this view isn't available in Quarto.
  4. editor-cell

    • Applies editorHeight to the Editor component. I adjusted padding a bit so that the scroll bars of the editor are at the edges of the editor container.

Testing

Prior to this PR, in most situations, the shinylive component is generally driven by the code height. The example document below contains a large single-file app that exhibits this behavior. With this PR, the overall component height is configurable in Quarto documents.

Example document
---
title: Shinylive in Quarto example
format: html
filters:
  - shinylive
---

This is a Shinylive application embedded in a Quarto doc.

```{shinylive-python}
#| standalone: true
#| layout: vertical
#| components: [editor, terminal, viewer]
#| editorHeight: 700px
#| viewerHeight: 600px

from shiny import *

app_ui = ui.page_fluid(
    ui.input_slider("n", "N", 0, 100, 40),
    ui.output_text_verbatim("txt"),
)

def server(input, output, session):
    @output
    @render.text
    def txt():
        return f"The value of n*2 is {input.n() * 2}"

app = App(app_ui, server)

# 1
# 2
# 3
# 4
# 5
# 6
# 7
# 8
# 9
# 10
# 11
# 12
# 13
# 14
# 15
# 16
# 17
# 18
# 19
# 20
# 21
# 22
# 23
# 24
# 25
# 26
# 27
# 28
# 29
# 30
# 31
# 32
# 33
# 34
# 35
# 36
# 37
# 38
# 39
# 40
# 41
# 42
# 43
# 44
# 45
# 46
# 47
# 48
# 49
# 50
# 51
# 52
# 53
# 54
# 55
# 56
# 57
# 58
# 59
# 60
# 61
# 62
# 63
# 64
# 65
# 66
# 67
# 68
# 69
# 70
# 71
# 72
# 73
# 74
# 75
# 76
# 77
# 78
# 79
# 80
# 81
# 82
# 83
# 84
# 85
# 86
# 87
# 88
# 89
# 90
# 91
# 92
# 93
# 94
# 95
# 96
# 97
# 98
# 99
# 100
```

@gadenbuie gadenbuie requested a review from wch June 13, 2024 16:01
Base automatically changed from feat/viewerheight-css to main June 14, 2024 18:12
Copy link
Collaborator

@schloerke schloerke left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you

@wch wch merged commit 9792e0c into main Jun 26, 2024
@wch wch deleted the feat/editor-height branch June 26, 2024 18:03
@wch
Copy link
Collaborator

wch commented Jun 26, 2024

Looks good!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add ability to set editorHeight
3 participants