Built site for gh-pages

.nojekyll

@@ -1 +1 @@
-1979e0f7
+ecd3a40b

search.json

@@ -13,12 +13,33 @@
     "section": "",
     "text": "iSEE is a Bioconductor package designed to produce interactive web applications for the visualisation of biological assays (Figure 2.1).\n\n\n\nFigure 1.1: The iSEE app interface.\n\n\nInitiated in 2017 with single-cell RNA-sequencing in mind, iSEE was designed in such a way that it naturally handles any biological assay that can be stored in a rectangular matrix of features (in rows) and samples (in columns).\nWhat makes iSEE stand out from other interactive web-application is its focus on the SummarizedExperiment class (Figure 1.2), a data structure is widely used throughout the Bioconductor project, from bulk to single-cell experiments.\n\n\n\nFigure 1.2: Schematic representation of the SummarizedExperiment class (reproduced from the vignette of the SummarizedExperiment package).\n\n\nThe well-defined and stable SummarizedExperiment data structure makes it easy for iSEE to automatically detect information commonly stored in dedicated components of SummarizedExperiment objects and display that information in a range of interactive panels, including tables and plots."
   },
+  {
+    "objectID": "ui.html#overview",
+    "href": "ui.html#overview",
+    "title": "2  The user interface",
+    "section": "2.1 Overview",
+    "text": "2.1 Overview\nIn this chapter, we describe the contents and layout of a standard iSEE app.\nSpecifically, 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.\nIllustrative screenshots are taken from the 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."
+  },
+  {
+    "objectID": "ui.html#panels",
+    "href": "ui.html#panels",
+    "title": "2  The user interface",
+    "section": "2.2 Panels",
+    "text": "2.2 Panels\nUnder entirely default settings, data sets loaded into the 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.\n\n\n\nFigure 2.1: First row of panel in the iSEE app interface, for an example data set.\n\n\nThe example code given in the help page of the iSEE() function produces an iSEE app that showcases all eight core panel types:\n\n\n\n\n\n\n\n(a) Reduced dimension plot\n\n\n\n\n\n\n\n(b) Row data table\n\n\n\n\n\n\n\n(c) Feature assay plot\n\n\n\n\n\n\n\n\n\n(d) Column data plot\n\n\n\n\n\n\n\n(e) Row data plot\n\n\n\n\n\n\n\n(f) Sample assay plot\n\n\n\n\n\n\n\n\n\n(g) Column data table\n\n\n\n\n\n\n\n(h) Complex heatmap plot\n\n\n\n\nFigure 2.2: Core panel types in the iSEE package, in their default configuration.\n\n\nEach core panel type is designed to display a different piece of information stored in the object. The purpose of each panel will be discussed in a separate chapter."
+  },
   {
     "objectID": "ui.html#actions",
     "href": "ui.html#actions",
     "title": "2  The user interface",
-    "section": "2.1 Actions",
-    "text": "2.1 Actions\nOnce the panels are loaded into the interface, users are free to interact with the interface in any way they see fit.\n\n2.1.1 Scrolling\nScroll up and down the interface, to bring panels in view.\n\n\n\nFigure 2.3: Scrolling up and down the app interface.\n\n\n\n\n2.1.2 Collabsible boxes\nClick on the header of collapsible boxes located under the panel output, to reveal interactive elements controlling the contents displayed in each panel.\n\n\n\nFigure 2.4: Expanding collapsible boxes.\n\n\n\n\n2.1.3 Selection inputs\nClick on dropdown elements to reveal their choices. Click a different choice to see the panel output change accordingly.\n\n\n\nFigure 2.5: Changing the selected choice in dropdown menus."
+    "section": "2.3 Actions",
+    "text": "2.3 Actions\nOnce the panels are loaded into the interface, users are free to interact with the interface in any way they see fit.\n\n2.3.1 Scrolling\nUse the mouse wheel, trackpad, or directional arrows (up and down), to scroll up and down the interface, to bring panels into view.\n\n\n\nFigure 2.3: Scrolling up and down the app interface.\n\n\n\n\n2.3.2 Collabsible boxes\nClick 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.\n\n\n\nFigure 2.4: Expanding collapsible boxes.\n\n\n\n\n2.3.3 Selection inputs\nClick on dropdown elements to reveal their choices. Click a different choice to see the panel output change accordingly.\n\n\n\nFigure 2.5: Changing the selected choice in dropdown menus.\n\n\n\n\n2.3.4 Checkboxes\nClick on checkboxes to toggle any number of mutually-compatible parameters.\n\n\n\nFigure 2.6: Toggling checkboxes."
+  },
+  {
+    "objectID": "ui.html#collapsible-boxes-of-parameters",
+    "href": "ui.html#collapsible-boxes-of-parameters",
+    "title": "2  The user interface",
+    "section": "2.4 Collapsible boxes of parameters",
+    "text": "2.4 Collapsible boxes of parameters\n\n2.4.1 Data parameters\nThe Data parameters collapsible box contains interactive elements that control the nature of the observations displayed in each panel.\nFor plots, that is typically the choice of variables shown along each axis.\nFor tables, that is typically the subset of columns hidden in the panel.\n\n\n\nFigure 2.7: The Data parameters box of the Reduced dimension plot panel, expanded to reveal its contents."
   },
   {
     "objectID": "references.html",

ui.html

@@ -133,11 +133,18 @@
     <h2 id="toc-title">Table of contents</h2>
 
   <ul>
-  <li><a href="#actions" id="toc-actions" class="nav-link active" data-scroll-target="#actions"><span class="header-section-number">2.1</span> Actions</a>
+  <li><a href="#overview" id="toc-overview" class="nav-link active" data-scroll-target="#overview"><span class="header-section-number">2.1</span> Overview</a></li>
+  <li><a href="#panels" id="toc-panels" class="nav-link" data-scroll-target="#panels"><span class="header-section-number">2.2</span> Panels</a></li>
+  <li><a href="#actions" id="toc-actions" class="nav-link" data-scroll-target="#actions"><span class="header-section-number">2.3</span> Actions</a>
   <ul class="collapse">
-  <li><a href="#scrolling" id="toc-scrolling" class="nav-link" data-scroll-target="#scrolling"><span class="header-section-number">2.1.1</span> Scrolling</a></li>
-  <li><a href="#collabsible-boxes" id="toc-collabsible-boxes" class="nav-link" data-scroll-target="#collabsible-boxes"><span class="header-section-number">2.1.2</span> Collabsible boxes</a></li>
-  <li><a href="#selection-inputs" id="toc-selection-inputs" class="nav-link" data-scroll-target="#selection-inputs"><span class="header-section-number">2.1.3</span> Selection inputs</a></li>
+  <li><a href="#scrolling" id="toc-scrolling" class="nav-link" data-scroll-target="#scrolling"><span class="header-section-number">2.3.1</span> Scrolling</a></li>
+  <li><a href="#collabsible-boxes" id="toc-collabsible-boxes" class="nav-link" data-scroll-target="#collabsible-boxes"><span class="header-section-number">2.3.2</span> Collabsible boxes</a></li>
+  <li><a href="#selection-inputs" id="toc-selection-inputs" class="nav-link" data-scroll-target="#selection-inputs"><span class="header-section-number">2.3.3</span> Selection inputs</a></li>
+  <li><a href="#checkboxes" id="toc-checkboxes" class="nav-link" data-scroll-target="#checkboxes"><span class="header-section-number">2.3.4</span> Checkboxes</a></li>
+  </ul></li>
+  <li><a href="#collapsible-boxes-of-parameters" id="toc-collapsible-boxes-of-parameters" class="nav-link" data-scroll-target="#collapsible-boxes-of-parameters"><span class="header-section-number">2.4</span> Collapsible boxes of parameters</a>
+  <ul class="collapse">
+  <li><a href="#data-parameters" id="toc-data-parameters" class="nav-link" data-scroll-target="#data-parameters"><span class="header-section-number">2.4.1</span> Data parameters</a></li>
   </ul></li>
   </ul>
 </nav>
@@ -162,9 +169,14 @@ <h1 class="title"><span class="chapter-number">2</span>&nbsp; <span class="chapt
 
 </header>
 
+<section id="overview" class="level2" data-number="2.1">
+<h2 data-number="2.1" class="anchored" data-anchor-id="overview"><span class="header-section-number">2.1</span> Overview</h2>
 <p>In this chapter, we describe the contents and layout of a standard <em>iSEE</em> app.</p>
 <p>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.</p>
 <p>Illustrative screenshots are taken from the <em>iSEE</em> app produced by the example code given in the help page of the <code>iSEE()</code> function, which can be access from an <em>R</em> console by typing either <code>help(iSEE)</code> or <code>?iSEE</code>.</p>
+</section>
+<section id="panels" class="level2" data-number="2.2">
+<h2 data-number="2.2" class="anchored" data-anchor-id="panels"><span class="header-section-number">2.2</span> Panels</h2>
 <p>Under entirely default settings, data sets loaded into the <em>iSEE</em> app are automatically parsed for standard information stored in <em>SummarizedExperiment</em> objects. Based on the information available and a set of eight core panel types designed to display different pieces of information, the <code>iSEE()</code> function automatically populates the interface with one panel of each type for which the relevant information is available.</p>
 <div id="fig-iSEE" class="quarto-figure quarto-figure-center anchored">
 <figure class="figure">
@@ -249,38 +261,64 @@ <h1 class="title"><span class="chapter-number">2</span>&nbsp; <span class="chapt
 </figure>
 </div>
 <p>Each core panel type is designed to display a different piece of information stored in the object. The purpose of each panel will be discussed in a separate chapter.</p>
-<section id="actions" class="level2" data-number="2.1">
-<h2 data-number="2.1" class="anchored" data-anchor-id="actions"><span class="header-section-number">2.1</span> Actions</h2>
+</section>
+<section id="actions" class="level2" data-number="2.3">
+<h2 data-number="2.3" class="anchored" data-anchor-id="actions"><span class="header-section-number">2.3</span> Actions</h2>
 <p>Once the panels are loaded into the interface, users are free to interact with the interface in any way they see fit.</p>
-<section id="scrolling" class="level3" data-number="2.1.1">
-<h3 data-number="2.1.1" class="anchored" data-anchor-id="scrolling"><span class="header-section-number">2.1.1</span> Scrolling</h3>
-<p>Scroll up and down the interface, to bring panels in view.</p>
+<section id="scrolling" class="level3" data-number="2.3.1">
+<h3 data-number="2.3.1" class="anchored" data-anchor-id="scrolling"><span class="header-section-number">2.3.1</span> Scrolling</h3>
+<p>Use the mouse wheel, trackpad, or directional arrows (up and down), to scroll up and down the interface, to bring panels into view.</p>
 <div id="fig-scrolling" class="quarto-figure quarto-figure-center anchored">
 <figure class="figure">
 <p><img src="figures/action-scroll.gif" class="img-fluid figure-img"></p>
 <figcaption class="figure-caption">Figure&nbsp;2.3: Scrolling up and down the app interface.</figcaption>
 </figure>
 </div>
 </section>
-<section id="collabsible-boxes" class="level3" data-number="2.1.2">
-<h3 data-number="2.1.2" class="anchored" data-anchor-id="collabsible-boxes"><span class="header-section-number">2.1.2</span> Collabsible boxes</h3>
-<p>Click on the header of collapsible boxes located under the panel output, to reveal interactive elements controlling the contents displayed in each panel.</p>
+<section id="collabsible-boxes" class="level3" data-number="2.3.2">
+<h3 data-number="2.3.2" class="anchored" data-anchor-id="collabsible-boxes"><span class="header-section-number">2.3.2</span> Collabsible boxes</h3>
+<p>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.</p>
 <div id="fig-collapsible-box" class="quarto-figure quarto-figure-center anchored">
 <figure class="figure">
 <p><img src="figures/action-collapsible-box.gif" class="img-fluid figure-img"></p>
 <figcaption class="figure-caption">Figure&nbsp;2.4: Expanding collapsible boxes.</figcaption>
 </figure>
 </div>
 </section>
-<section id="selection-inputs" class="level3" data-number="2.1.3">
-<h3 data-number="2.1.3" class="anchored" data-anchor-id="selection-inputs"><span class="header-section-number">2.1.3</span> Selection inputs</h3>
+<section id="selection-inputs" class="level3" data-number="2.3.3">
+<h3 data-number="2.3.3" class="anchored" data-anchor-id="selection-inputs"><span class="header-section-number">2.3.3</span> Selection inputs</h3>
 <p>Click on dropdown elements to reveal their choices. Click a different choice to see the panel output change accordingly.</p>
 <div id="fig-selectinput" class="quarto-figure quarto-figure-center anchored">
 <figure class="figure">
 <p><img src="figures/action-selection-input.gif" class="img-fluid figure-img"></p>
 <figcaption class="figure-caption">Figure&nbsp;2.5: Changing the selected choice in dropdown menus.</figcaption>
 </figure>
 </div>
+</section>
+<section id="checkboxes" class="level3" data-number="2.3.4">
+<h3 data-number="2.3.4" class="anchored" data-anchor-id="checkboxes"><span class="header-section-number">2.3.4</span> Checkboxes</h3>
+<p>Click on checkboxes to toggle any number of mutually-compatible parameters.</p>
+<div id="fig-checboxes" class="quarto-figure quarto-figure-center anchored">
+<figure class="figure">
+<p><img src="figures/action-checkboxes.gif" class="img-fluid figure-img"></p>
+<figcaption class="figure-caption">Figure&nbsp;2.6: Toggling checkboxes.</figcaption>
+</figure>
+</div>
+</section>
+</section>
+<section id="collapsible-boxes-of-parameters" class="level2" data-number="2.4">
+<h2 data-number="2.4" class="anchored" data-anchor-id="collapsible-boxes-of-parameters"><span class="header-section-number">2.4</span> Collapsible boxes of parameters</h2>
+<section id="data-parameters" class="level3" data-number="2.4.1">
+<h3 data-number="2.4.1" class="anchored" data-anchor-id="data-parameters"><span class="header-section-number">2.4.1</span> Data parameters</h3>
+<p>The <em>Data parameters</em> collapsible box contains interactive elements that control the nature of the observations displayed in each panel.</p>
+<p>For plots, that is typically the choice of variables shown along each axis.</p>
+<p>For tables, that is typically the subset of columns <em>hidden</em> in the panel.</p>
+<div id="fig-data-param-box-reddimplot" class="quarto-figure quarto-figure-center anchored">
+<figure class="figure">
+<p><img src="figures/data-parameters-reduced-dimension-plot.png" class="img-fluid figure-img"></p>
+<figcaption class="figure-caption">Figure&nbsp;2.7: The <em>Data parameters</em> box of the <em>Reduced dimension plot</em> panel, expanded to reveal its contents.</figcaption>
+</figure>
+</div>
 
 
 </section>