-
Notifications
You must be signed in to change notification settings - Fork 0
/
ui.qmd
115 lines (64 loc) · 5.93 KB
/
ui.qmd
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
# The user interface
## Overview
In this chapter, we describe the contents and layout of a standard [*iSEE*][bioc-isee] app.
Specifically, we focus on the appearance of the interactive point-and-click interface presented to end-users who come to simply explore the data set without any programming knowledge required.
Illustrative screenshots are taken from the [*iSEE*][bioc-isee] app produced by the example code given in the help page of the `iSEE()` function,
which can be access from an *R* console by typing either `help(iSEE)` or `?iSEE`.
## Panels
Under entirely default settings, data sets loaded into the [*iSEE*][bioc-isee] app are automatically parsed for standard information stored in *SummarizedExperiment* objects.
Based on the information available and a set of eight core panel types designed to display different pieces of information, the `iSEE()` function automatically populates the interface with one panel of each type for which the relevant information is available.
![First row of panel in the iSEE app interface, for an example data set.](figures/iSEE.png){#fig-iSEE}
The example code given in the help page of the `iSEE()` function produces an [*iSEE*][bioc-isee] app that showcases all eight core panel types.
For simplicity, [@fig-core-panel-types] displays only the main component of each of those eight core panel types, for an example data set.
Additional components accompanying each panel and the purpose of each panel will be discussed in a separate chapter.
::: {#fig-core-panel-types layout-ncol=3}
![Reduced dimension plot](figures/ReducedDimensionPlot.png){#fig-ReducedDimensionPlot}
![Row data table](figures/RowDataTable.png){#fig-RowDataTable}
![Feature assay plot](figures/FeatureAssayPlot.png){#fig-FeatureAssayPlot}
![Column data plot](figures/ColumnDataPlot.png){#fig-ColumnDataPlot}
![Row data plot](figures/RowDataPlot.png){#fig-RowDataPlot}
![Sample assay plot](figures/SampleAssayPlot.png){#fig-SampleAssayPlot}
![Column data table](figures/ColumnDataTable.png){#fig-ColumnDataTable}
![Complex heatmap plot](figures/ComplexHeatmapPlot.png){#fig-ComplexHeatmapPlotlumnDataPlot}
Main component the eight core panel type in the [*iSEE*][bioc-isee] package, in their default configuration.
:::
## Actions
Once the panels are loaded into the interface, users are free to interact with the interface in any way they see fit.
### Scrolling
Use the mouse wheel, trackpad, or directional arrows (up and down), to scroll up and down the interface, to bring panels into view.
Horizontal scrolling is not possible in [*Shiny*][posit-shiny] apps.
![Scrolling up and down the app interface.](figures/action-scroll.gif){#fig-scrolling}
There is no limit to the number of panels that may be added to the [*iSEE*][bioc-isee] user interface.
Meanwhile, no more than twelve panels may be displayed on a single row -- one panel per unit in the 12-unit layout of pages produced by the [*shiny*][cran-shiny] package -- with rows being filled from left to right and panels exceeding the 12-unit layout being placed on new rows.
The 12-unit grid system used by [*shiny*][cran-shiny] is described in the [Shiny Application layout guide][posit-layout-guide].
### Collabsible boxes
Click on the header of collapsible boxes located under the panel output, to reveal interactive elements controlling various aspects of the contents displayed in each panel.
![Expanding collapsible boxes.](figures/action-collapsible-box.gif){#fig-collapsible-box}
### Selection inputs
Click on dropdown elements to reveal their choices.
Click a different choice to see the panel output change accordingly.
![Changing the selected choice in dropdown menus.](figures/action-selection-input.gif){#fig-selectinput}
### Checkboxes
Click on checkboxes to toggle any number of mutually-compatible parameters.
![Toggling checkboxes.](figures/action-checkboxes.gif){#fig-checboxes}
## Collapsible boxes of parameters
### Data parameters
The *Data parameters* collapsible box contains interactive elements that control the nature of the observations displayed in each panel.
For plots, that is typically the choice of variables shown along each axis.
For tables, that is typically the subset of columns *hidden* in the panel.
![The *Data parameters* box of the *Reduced dimension plot* panel, expanded to reveal its contents.](figures/data-parameters-reduced-dimension-plot.png){#fig-data-param-box-reddimplot width=400}
### Visual parameters
The *Visual parameters* collapsible box contains interactive elements that control the appearance of data points and non-data elements of panels that produce a plot.
That is typically the color, shape, size, and opacity of data points.
It may also include the possibility of faceting the plot by discrete variables along each axis,
and further customisation of non-data elements of the plot such as axis labels and the plot legend.
![The *Visual parameters* box of the *Reduced dimension plot* panel, expanded and configured to reveal the 'Color', 'Shape', 'Size', and 'Facet' sections of its contents.](figures/visual-parameters-reduced-dimension-plot.png){#fig-visual-param-box-reddimplot width=400}
### Selection parameters
The *Selection parameters* collapsible box contains interactive elements that control the transmission and usage of selections in each panel.
That is typically the name of another panel to receive a selection from and whether to restrict data points in the current panel to those selected in the other panel
It may also include the possibility of saving and deleting saved selections made in the current panel.
![The *Selection parameters* box of the *Reduced dimension plot* panel, expanded to reveal its contents.](figures/selection-parameters-reduced-dimension-plot.png){#fig-selection-param-box-reddimplot width=400}
[bioc-isee]: https://bioconductor.org/packages/iSEE/
[cran-shiny]: https://cran.r-project.org/web/packages/shiny/index.html
[posit-shiny]: https://shiny.posit.co/
[posit-layout-guide]: https://shiny.posit.co/r/articles/build/layout-guide/