Skip to content

Commit

Permalink
Fix getting-started-with-teal (#1057)
Browse files Browse the repository at this point in the history 
part of insightsengineering/nestdevs-tasks#48

- Tidyup the gettins-started-with-teal vignette .
- Align links between vignettes

---------

Signed-off-by: Vedha Viyash <[email protected]>
Co-authored-by: vedhav <[email protected]>
Co-authored-by: Vedha Viyash <[email protected]>
Co-authored-by: Dony Unardi <[email protected]>
  • Loading branch information
@gogonzo @vedhav @donyunardi
4 people authored Jan 24, 2024
1 parent 157fd7b commit 557480d
Show file tree
Hide file tree
Showing 14 changed files with 397 additions and 46 deletions.
79 changes: 79 additions & 0 deletions inst/design/filters-mapping.drawio
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<mxfile host="65bd71144e">
<diagram name="Page-1" id="Af2CoAbSZcckCuTcOnmQ">
<mxGraphModel dx="1592" dy="1087" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="33" value="Predefined filters" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxGeometry x="455" y="370" width="100" height="20" as="geometry"/>
</mxCell>
<mxCell id="34" value="module 2" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxGeometry x="745" y="370" width="100" height="20" as="geometry"/>
</mxCell>
<mxCell id="35" value="module 1" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxGeometry x="605" y="370" width="100" height="20" as="geometry"/>
</mxCell>
<mxCell id="36" value="module 3" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxGeometry x="885" y="370" width="100" height="20" as="geometry"/>
</mxCell>
<mxCell id="37" value="module 4" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxGeometry x="1025" y="370" width="100" height="20" as="geometry"/>
</mxCell>
<mxCell id="38" value="filter 1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
<mxGeometry x="470" y="420" width="70" height="30" as="geometry"/>
</mxCell>
<mxCell id="39" value="filter 2" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
<mxGeometry x="470" y="470" width="70" height="30" as="geometry"/>
</mxCell>
<mxCell id="40" value="filter 3" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="1">
<mxGeometry x="470" y="520" width="70" height="30" as="geometry"/>
</mxCell>
<mxCell id="41" value="filter 4" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
<mxGeometry x="470" y="570" width="70" height="30" as="geometry"/>
</mxCell>
<mxCell id="42" value="filter 5" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontColor=#333333;" vertex="1" parent="1">
<mxGeometry x="470" y="620" width="70" height="30" as="geometry"/>
</mxCell>
<mxCell id="43" value="filter 6" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
<mxGeometry x="470" y="670" width="70" height="30" as="geometry"/>
</mxCell>
<mxCell id="45" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="590" y="400" width="130" height="310" as="geometry"/>
</mxCell>
<mxCell id="46" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="730" y="400" width="130" height="310" as="geometry"/>
</mxCell>
<mxCell id="47" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="870" y="400" width="130" height="310" as="geometry"/>
</mxCell>
<mxCell id="48" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="1010" y="400" width="130" height="310" as="geometry"/>
</mxCell>
<mxCell id="50" value="filter 1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
<mxGeometry x="620" y="420" width="70" height="30" as="geometry"/>
</mxCell>
<mxCell id="51" value="filter 1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
<mxGeometry x="760" y="420" width="70" height="30" as="geometry"/>
</mxCell>
<mxCell id="52" value="filter 1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
<mxGeometry x="900" y="420" width="70" height="30" as="geometry"/>
</mxCell>
<mxCell id="53" value="filter 1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
<mxGeometry x="1040" y="420" width="70" height="30" as="geometry"/>
</mxCell>
<mxCell id="54" value="filter 2" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
<mxGeometry x="900" y="470" width="70" height="30" as="geometry"/>
</mxCell>
<mxCell id="55" value="filter 2" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
<mxGeometry x="620" y="470" width="70" height="30" as="geometry"/>
</mxCell>
<mxCell id="56" value="filter 3" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="1">
<mxGeometry x="760" y="520" width="70" height="30" as="geometry"/>
</mxCell>
<mxCell id="57" value="filter 4" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
<mxGeometry x="620" y="570" width="70" height="30" as="geometry"/>
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>
187 changes: 187 additions & 0 deletions inst/design/teal-app-components-hover.drawio
View file

Large diffs are not rendered by default.

61 changes: 61 additions & 0 deletions inst/design/teal-app-components.drawio
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<mxfile host="65bd71144e">
<diagram name="Page-1" id="Af2CoAbSZcckCuTcOnmQ">
<mxGraphModel dx="1405" dy="959" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="2" value="" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.containers.browserWindow;rSize=0;strokeColor=#666666;strokeColor2=#008cff;strokeColor3=#c4c4c4;mainText=,;recursiveResize=0;container=0;" parent="1" vertex="1">
<mxGeometry x="430" y="230" width="880" height="560" as="geometry"/>
</mxCell>
<mxCell id="3" value="Title" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.containers.anchor;fontSize=17;fontColor=#666666;align=left;whiteSpace=wrap;" parent="1" vertex="1">
<mxGeometry x="490" y="242" width="110" height="26" as="geometry"/>
</mxCell>
<mxCell id="4" value="127.0.0.1:3838" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.containers.anchor;rSize=0;fontSize=17;fontColor=#666666;align=left;" parent="1" vertex="1">
<mxGeometry x="560" y="290" width="250" height="26" as="geometry"/>
</mxCell>
<mxCell id="10" value="&lt;font style=&quot;font-size: 20px;&quot;&gt;Header&lt;/font&gt;" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.text.textBox;fontColor=#666666;align=left;fontSize=17;spacingLeft=4;spacingTop=-3;whiteSpace=wrap;strokeColor=#666666;mainText=" parent="1" vertex="1">
<mxGeometry x="450" y="350" width="840" height="30" as="geometry"/>
</mxCell>
<mxCell id="11" value="&lt;font style=&quot;font-size: 20px;&quot;&gt;Footer&lt;/font&gt;" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.text.textBox;fontColor=#666666;align=left;fontSize=17;spacingLeft=4;spacingTop=-3;whiteSpace=wrap;strokeColor=#666666;mainText=" parent="1" vertex="1">
<mxGeometry x="450" y="741" width="840" height="30" as="geometry"/>
</mxCell>
<mxCell id="5" value="&lt;span style=&quot;color: rgb(102, 102, 102);&quot;&gt;&lt;font style=&quot;font-size: 20px;&quot;&gt;Active Module Content&lt;/font&gt;&lt;/span&gt;" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.containers.marginRect2;rectMarginTop=32;strokeColor=#666666;gradientColor=none;whiteSpace=wrap;fontSize=17;" parent="1" vertex="1">
<mxGeometry x="450" y="391.5" width="620" height="340" as="geometry"/>
</mxCell>
<mxCell id="21" value="&lt;font color=&quot;#666666&quot;&gt;Module 1&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fontColor=#b04f4f;strokeColor=#E6E6E6;fillColor=#E6E6E6;" parent="1" vertex="1">
<mxGeometry x="460" y="392.5" width="75" height="27.5" as="geometry"/>
</mxCell>
<mxCell id="22" value="&lt;font color=&quot;#ffffff&quot;&gt;Module 2&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fontColor=#b04f4f;strokeColor=#008cff;fillColor=#008cff;" parent="1" vertex="1">
<mxGeometry x="537" y="390.5" width="75" height="27.5" as="geometry"/>
</mxCell>
<mxCell id="25" value="&lt;font color=&quot;#666666&quot;&gt;Module 3&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fontColor=#b04f4f;strokeColor=#E6E6E6;fillColor=#E6E6E6;" parent="1" vertex="1">
<mxGeometry x="614" y="392.5" width="75" height="27.5" as="geometry"/>
</mxCell>
<mxCell id="26" value="" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.containers.topButton;rSize=5;strokeColor=#008cff;fillColor=#008cff;gradientColor=none;resizeWidth=1;movable=0;deletable=1;" parent="1" vertex="1">
<mxGeometry x="450" y="416.5" width="620" height="7" as="geometry"/>
</mxCell>
<mxCell id="31" value="Filter Panel" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#666666;fontSize=20;fontColor=#666666;fillColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="1080" y="390" width="210" height="342" as="geometry"/>
</mxCell>
<mxCell id="33" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#BF37F3;gradientColor=none;opacity=20;strokeColor=none;arcSize=7;" vertex="1" parent="1">
<mxGeometry x="462" y="242" width="140" height="28" as="geometry"/>
</mxCell>
<mxCell id="34" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FB6251;gradientColor=none;opacity=20;strokeColor=none;arcSize=7;" vertex="1" parent="1">
<mxGeometry x="450" y="740" width="840" height="31" as="geometry"/>
</mxCell>
<mxCell id="35" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FB6251;gradientColor=none;opacity=20;strokeColor=none;arcSize=7;" vertex="1" parent="1">
<mxGeometry x="450" y="350" width="840" height="30" as="geometry"/>
</mxCell>
<mxCell id="36" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f2b73f;opacity=20;strokeColor=none;arcSize=7;" vertex="1" parent="1">
<mxGeometry x="454" y="385" width="240" height="31" as="geometry"/>
</mxCell>
<mxCell id="37" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#83cc41;opacity=20;strokeColor=none;arcSize=2;" vertex="1" parent="1">
<mxGeometry x="450" y="423.5" width="620" height="308" as="geometry"/>
</mxCell>
<mxCell id="38" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#3A88FE;opacity=20;strokeColor=none;arcSize=2;" vertex="1" parent="1">
<mxGeometry x="1080" y="390" width="210" height="340" as="geometry"/>
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>
2 changes: 1 addition & 1 deletion vignettes/blueprint/actors.Rmd
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ However, developers have the freedom to create a `teal` module that is customize

Ultimately, one or more `teal` modules are employed to construct a `teal` app.

To learn more about creating custom modules follow the [Tutorial on Creating a Custom Module](https://insightsengineering.github.io/teal/latest-tag/articles/creating-custom-modules.html).
To learn more about creating custom modules follow the [Tutorial on Creating a Custom Module](creating-custom-modules.html).

## Workflow in a clinical trial study

Expand Down
2 changes: 1 addition & 1 deletion vignettes/blueprint/in_app_data.Rmd
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,4 @@ This allows the app developer to include user actions data creation, fetching, a

## Further reading

A complete explanation of using the `teal_data_module` can be found in [this `teal` vignette](https://insightsengineering.github.io/teal/latest-tag/articles/data-as-shiny-module.html)
A complete explanation of using the `teal_data_module` can be found in [this `teal` vignette](data-as-shiny-module.html)
2 changes: 1 addition & 1 deletion vignettes/blueprint/intro.Rmd
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,4 @@ The `teal` framework's functionality draws heavily from the following packages:

Although these packages are mentioned in the material, we strongly recommend visiting their vignettes to learn more about them.

Learn on how to make your first `teal` application [here](https://insightsengineering.github.io/teal/latest-tag/articles/teal.html)!
Learn on how to make your first `teal` application [here](getting-started-with-teal.html)!
6 changes: 5 additions & 1 deletion vignettes/creating-custom-modules.Rmd
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,4 +185,8 @@ if (interactive()) {
<img src="images/custom_app.png" alt="Teal Duck" style="width: 100%;"/>

## Adding reporting to a module
Refer to `vignette("adding_support_for_reporting")` to read about adding support for reporting in your `teal` module.
Refer to [this vignette](adding-support-for-reporting.html) to read about adding support for reporting in your `teal` module.

## Using standard widgets in your custom module

The [`teal.widgets`](https://insightsengineering.github.io/teal.widgets/latest-tag/) package provides various widgets which can be leveraged to quickly create standard elements in your custom module.
5 changes: 4 additions & 1 deletion vignettes/filter-panel.Rmd
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,12 +76,15 @@ One possible scenario is depicted in the figure below:
- `filter 4` is used only by `module 1`
- `filter 5` and `filter 6` are not active in any of the modules

![](./images/filters_mapping.jpg)
<!-- This image is generated using the diagram inside `inst/design` -->
![](./images/filters-mapping.svg)

To achieve the described setup, one must set the `module_specific` argument to `TRUE` and use the `mapping` argument to match filters to modules.
`mapping` takes a named list where element names correspond to module labels, and elements are vectors of `teal_slice` `id`s applied to that module at startup.
`teal_slice`s listed the element called `"global_filters"` will be applied to all modules.

For a detailed explanation about the filter states, see [this `teal.slice` vignette](https://insightsengineering.github.io/teal.slice/latest-tag/articles/filter-panel-for-developers.html).

```r
library(teal)

Expand Down
Loading

0 comments on commit 557480d

Please sign in to comment.