element;intro
#Welcome;Welcome to the interactive tour for iSEE - the Interactive SummarizedExperiment Explorer.<br/><br/>You will be shown around the different components of iSEE and learn the basic usage mechanisms by doing. Highlighted elements will respond to the user's actions, while the rest of the UI will be shaded. You will be prompted at particular spots to perform some actions, which will be marked with "<strong>Action:</strong>" text. Please take care to follow these instructions, since later parts of the tour may assume that all the actions from previous steps have been performed.<br/><br/><strong>Action:</strong> now, click on the 'Next' button or use the right arrow of your keyboard to proceed into your tour.
#allpanels;iSEE provides a Shiny interface that allows you to generate a series of panels for exploring <code>SummarizedExperiment</code> objects. Here, we use single-cell RNA sequencing data from the <a href="https://doi.org/doi:10.18129/B9.bioc.scRNAseq"><i>scRNAseq</i> package</a>, specifically a subset of gene expression profiles from cells in the mouse visual cortex <a href="https://doi.org/10.1038/nn.4216">(Tasic <i>et al.</i>, 2016)</a>. Each column of the <code>SummarizedExperiment</code> corresponds to a cell, while each row corresponds to a gene.<br/><br/>Using iSEE, you can generate a variety of different panel types to visualize the data. These are described in more detail in the following steps.
#redDimPlot1;For example, you can construct a <font color="#402ee8">Reduced dimension plot</font> (e.g., PCA, <i>t</i>-SNE) to efficiently explore high-dimensional datasets. Here, each point represents a cell.
#colDataPlot1;You can construct a <font color="#402ee8">Column data plot</font> involving column-level metadata, where each point represents a column (in this case, a cell) in the <code>SummarizedExperiment</code> object. Points can be displayed using violin plots stratified by an experimental factor on the x-axis, or as a scatter plot involving continuous variables on both the x- and y-axes.
#featAssayPlot1;A <font color="#402ee8">Feature assay plot</font> displays the assay values (here, gene expression) across all cells. Like the <font color="#402ee8">Column data plot</font>, points represent cells and can be shown in both violin or scatter plots, depending on the variable selected on the x-axis.
#rowStatTable1;A <font color="#402ee8">Row statistic table</font> displays values in the <code>rowData</code> slot of your input object. They can also be used to efficiently select genes for the other plots.
#rowDataPlot1;You can plot the <code>rowData</code> values with a <font color="#402ee8">Row data plot</font>.
#heatMapPlot1;You can produce a <font color="#402ee8">Heat map</font> to visualize a feature-by-sample matrix of assay values, for a selected subset of features.
#redDimPlot1_DataBoxOpen;For each plot panel, a variety of parameters are available to control the appearance and behaviour of the plot. These parameters are located in these collapsible boxes, such as the <font color="#402ee8">Data parameters</font> box that contains parameters related to the type of data being shown.<br /><br /><strong>Action:</strong> please click on the header of this collapsible box to see the available options.
#redDimPlot1_Type + .selectize-control;<strong>Action:</strong> change this to <code>(2) TSNE</code> to see the two-dimensional <i>t</i>-SNE representation.
#redDimPlot1;You can appreciate how the panel immediately switched to the requested dimensionality reduction result.
#redDimPlot1_VisualBoxOpen;The <font color="#402ee8">Visual parameters</font> box contains parameters related to coloring, point appearance, and other visual aspects.<br /><br /><strong>Action:</strong> please click on the header of this box to see the available options.
#redDimPlot1_ColorBy;By default, the points (cells) are not colored.<br /><br /><strong>Action:</strong> select <code>Column data</code> to colour the cells by a column metadata variable.
#redDimPlot1;By default, the first available column in the <code>colData</code> slot is used.
#redDimPlot1_ColorByColData + .selectize-control;<strong>Action:</strong> choose <code>passes_qc_checks_s</code> to colour cells based on whether they passed quality control (QC) checks.<br /><br />
#redDimPlot1;You can now see that all cells that passed QC (<code>Y</code>) are colored differently from those that did not pass.
#colDataPlot1_DataBoxOpen;The plotting behaviour will also change depending on the type of data being plotted. This is best illustrated with <font color="#402ee8">Column data plot 1</font>.<br /><br /><strong>Action:</strong> click on the header of this collapsible box.
#colDataPlot1_XAxis;Currently, there is only one violin plot.<br /><br /><strong>Action:</strong> click on <code>Column data</code>.
#colDataPlot1;You can see how this now changes to a scatter plot when plotting two continuous variables against each other.
#colDataPlot1_XAxisColData + .selectize-control;<strong>Action:</strong> click on (or type) <code>driver_1_s</code>.
#colDataPlot1;The plot now changes to a grouped violin plot for a categorical variable on the x-axis. Note that a horizontal violin plot can also be generated if the categorical variable is assigned to the y-axis.
#colDataPlot1_YAxis + .selectize-control;<strong>Action:</strong> click on (or type) <code>dissection_s</code>.
#colDataPlot1;The plot now changes to a rectangle plot for two categorical variables. The size of each rectangle corresponds to the number of points in each combination of covariate levels.
#redDimPlot1_SelectBoxOpen;The <font color="#402ee8">Selection parameters</font> box contains parameters to define the interactions between panels.<br /><br /><strong>Action:</strong> click on the header of this collapsible box to see the available options.
#redDimPlot1_SelectBoxOpen;The parameters in this box control how panels are linked together, whereby points that are selected in a "transmitting" panel can be visualized in a "receiving" panel.<br /><br />In the next few steps, we will describe how we can examine the expression of a gene of interest in a subpopulation of cells. We will do this by selecting a subset of cells in <font color="#402ee8">Reduced dimension plot 1</font>, and then activating this brush on the receiving plot, i.e., <font color="#402ee8">Feature assay plot 1</font>.
#redDimPlot1;Two types of point selection are available in <i>iSEE</i>. The first is to use a <i>Shiny</i> brush, which allows users to select a rectangular area by clicking, holding, and dragging the mouse pointer. We also provide support for a polygon-lasso selection, using single clicks to define lasso waypoints, and then a final click on the initial waypoint to close the lasso.<br /><br /><strong>Action:</strong> try brushing by selecting an area in this plot that contains a subset of cells.
#redDimPlot1_PanelGeneralInfo;Some information on the number of selected points is displayed in this element.
#featAssayPlot1_SelectBoxOpen;To transmit the selection to other panels, open the collapsible box for <font color="#402ee8">Feature assay plot 1</font> (the receiving plot).<br /><br /><strong>Action:</strong> click on the collapsible box.
#featAssayPlot1_SelectByPlot + .selectize-control;<strong>Action:</strong> select <font color="#402ee8">Reduced dimension plot 1</font>.<br /><br />This means that point selections from <font color="#402ee8">Reduced dimension plot 1</font> will be transmitted to the current <font color="#402ee8">Feature assay plot 1</font>.
#featAssayPlot1;You can appreciate how this operation changed the plot, with all non-selected points being transparent.
#redDimPlot1_PanelLinkInfo;This element tracks the links that exist between panels. For example, this plot transmits the brush selection to...
#featAssayPlot1_PanelLinkInfo;... this plot.
#featAssayPlot1_SelectEffect;The effect of the selection can also be altered. If set to <font color="#402ee8">Restrict</font>, only the selected points will be plotted in the receiving plot. If <font color="#402ee8">Color</font>, all points are plotted and the selected points are marked with a specified color. The default is to use <font color="#402ee8">Transparent</font>, where all non-selected points are transparent.
#featAssayPlot1;Even though this panel is receiving a selection, it is still able to transmit a selection to other panels. In this manner, we can construct arbitrarily complex (non-circular) networks between panels to display only a subset of points that match a certain criteria. This is equivalent to multi-step gating schemes in flow cytometry, provided the selection effect is set to <font color="#402ee8">Restrict</font>.<br/><br/>Another important thing to keep in mind when selecting points from violin plots is that points will be selected only if the brushed area includes the center of the x-tick, i.e., the center of the violin plot. This simplifies point selection as users do not need to capture the width of the violin plot, the values of which have no real meaning for individual points.
#redDimPlot1;A zooming functionality is also available by first brushing, then double-clicking on the brushed area.<br /><br /><strong>Action:</strong> click and hold to select an area, then release. Now, double click inside the marked area to zoom in. To zoom out to the original plot, double-click on the plot.
#heatMapPlot1;We will now have a look at a couple of features that are unique to the heatmaps, i.e. the <font color="#402ee8">Feature parameters</font> and the <font color="#402ee8">Column data parameters</font>.
#heatMapPlot1_FeatNameBoxOpen;<strong>Action:</strong> click here to open this collapsible box.
#heatMapPlot1_FeatName + .selectize-control;Here, you can specify the names of the features to include in the heatmap. This can be done manually (note the autocompletion) or by importing features from other panels such as row data plots or row statistics tables.
#heatMapPlot1_FeatNameSource + .selectize-control;<strong>Action:</strong> select <font color="#402ee8">Row statistics table 1</font> as the source from which to import features.
#rowStatTable1;<strong>Action:</strong> type in "Cxc" to select genes with names containing that string (likely chemokines)...
#heatMapPlot1_Clear;<strong>Action:</strong> click on this button to remove existing features...
#heatMapPlot1_Import;<strong>Action:</strong> ... and then click on this button to import the selected "Cxc"-containing genes into the heatmap.
#heatMapPlot1_Clustered;You can rearrange the feature order in the heatmap manually by drag-and-dropping the feature names. Alternatively, you can perform hierarchical clustering on the feature assay values.<br /><br /><strong>Action:</strong> click on this button.
#heatMapPlot1;The rows are now reorganized for a more aesthetically pleasing visualization.
#heatMapPlot1_ColDataBoxOpen;Columns in the heatmap are ordered according to selected column data fields.<br /><br /><strong>Action:</strong> open this box.
#heatMapPlot1_ColData + .selectize-control;You can choose which fields to use to annotate the columns. Multiple selections can be made, in which case the ordering is performed on the first field, and ties are broken by the second field, and so on.<br /><br /><strong>Action:</strong> remove "NREADS" by clicking on the cross, and type in "Core.Type" and then "Primary.Type".
#heatMapPlot1;The information displayed at top of the heatmap now reflects your selections.
#heatMapPlot1_FeatNameBoxOpen;More general coloring parameters can be found in this box, as well as the options to center and perform row scaling on the expression values.
.navbar-static-top;A number of useful features are available from the dashboard header.<br /><br /><strong>Action:</strong> click on the panels icon to open the Panel Organization menu.<br /><br />Clicking on the <i>Organize panels</i> button opens a modal window, which contains a multi-selectize input widget to add, remove, resize, and reorder panels in the main interface. You can see how the boxes below this control mirror the order of the panels in the main body of the app.
.navbar-static-top;<strong>Action:</strong> click on the wrench icon to open the Diagnostics dropdown.<br /><br />In this dropdown menu, you can access a graph representation of the existing links between panels, the code required to reproduce all of the plots, and the code required to reproduce the current app state.
.navbar-static-top;<strong>Action:</strong> click on the question mark icon to open the Documentation dropdown.<br/><br/> This contains the button to start the <code>introjs</code>-based tour, which you are currently taking, as well as a link to the vignette for the iSEE package, in case you want to consult it while running the app.
.navbar-static-top;<strong>Action:</strong> click on the info icon.<br/><br/>This reports the session information from which you are running iSEE (which you should report in case of issues or bugs), the appropriate citation if you use iSEE in your work, as well as information on how to contact the iSEE development team.
#Thanks;Thank you for taking the tour of iSEE!
