Commit 80558ceb authored by Jean-Karim Heriche's avatar Jean-Karim Heriche

Updated README and screenshot.

parent 85f3b0d4
...@@ -51,26 +51,33 @@ The app is then accessible from a web browser at http://127.0.0.1:5476 ...@@ -51,26 +51,33 @@ The app is then accessible from a web browser at http://127.0.0.1:5476
Alternatively, open the file image_data_explorer.R with [RStudio](https://www.rstudio.com/products/rstudio/download/) and click the 'Run App' button. Alternatively, open the file image_data_explorer.R with [RStudio](https://www.rstudio.com/products/rstudio/download/) and click the 'Run App' button.
#### Data input #### Data input
The IDE opens with the 'Input data' section comprising 4 boxes: The IDE opens with the 'Input data' section with several boxes:
* **Input data file** * **Input data file**
This is where the tabular data is selected and uploaded to the app server. Before uploading a file, make sure that the correct column separator and quote type are selected. This is where the tabular data is selected and uploaded to the app server. Before uploading a file, make sure that the file has a header and the correct column separator and quote type are selected.
* **Plot variables** * **Plot variables**
This allows to select two columns whose values will be shown in a scatterplot. This allows to select one or two columns whose values will be shown in a scatterplot.
* **Additional variables to display on hover**
By default when hovering over a point in the plot, the values of the plot variables are shown in a table below the plot. This box allows the selection of additional variables to be displayed when hovering over a point.
* **Columns to hide**
Hiding columns minimizes the amount of horizontal scrolling needed to reach columns on the right-hand side of the table when all columns can't fit on screen.
* **Groups**
This allows to select one column whose values will be used to set colours for the points in the plot. Only 9 distinct colours are available so any selected column with more than 9 distinct values will be ignored.
* **Images** * **Images**
If images are associated with the data file, select the image root directory then one or two columns containing the paths to the images relative to the selected root directory. If a column name contains the pattern 'image.*path', this column will be preselected in the image 1field. If images are associated with the data file, select the image root directory then one or two columns containing the paths to the images relative to the selected root directory. If a column name contains the pattern 'image.*path', this column will be preselected in the image 1 field.
* **ROIs** * **ROIs**
If the data table rows correspond to ROIs of associated images, select here the columns containing the coordinates of the ROIs centres. If the data table rows correspond to ROIs of associated images, select here the columns containing the coordinates of the ROIs centres.
If the rows correspond to time points only (i.e. with no ROI definition), select only a column for frame coordinates and leave X and Y coordinates empty. If a column name contains the pattern 'coordinate_X|Y|Z|time', it will be preselected in the matching ROI coordinate field (e.g. a column named cell_coordinate_x will be preselected as column for coordinate X). If the rows correspond to time points only (i.e. with no ROI definition), select only a column for frame coordinates and leave X and Y coordinates empty. If a column name contains the pattern 'coordinate_X|Y|Z|time', it will be preselected in the matching ROI coordinate field (e.g. a column named cell_coordinate_x will be preselected as column for coordinate X).
#### Data exploration #### Data exploration and annotation
Once the data input section has been completed, data exploration is reached by clicking 'Explore' in the sidebar. Once the data input section has been completed, data exploration is reached by clicking 'Explore' in the sidebar.
This section is formed of three parts: This section is formed of three parts:
* **A plot** area on the top left of the screen. This shows a scatterplot of the variables selected in the data input section. * **A plot** area on the top left of the screen. This shows a scatterplot of the variables selected in the data input section.
Clicking on a data point in the graph selects it in the data table below and opens the corresponding image(s). If the point is associated with x,y coordinates then a red dot is added to the image(s) at the position given by these coordinates. Clicking on a data point in the plot selects it in the data table below and opens the corresponding image(s). If the point is associated with x,y coordinates then a red dot is added to the image(s) at the position given by these coordinates.
* **An image viewer** area next to the plot area. This is where images selected under image 1 in the data input section will appear. * **An image viewer** area next to the plot area. This is where images selected under image 1 in the data input section will appear.
Clicking on the image selects the corresponding row in the data table and highlights the corresponding point in the plot. If rows correspond to ROIs then the click position is indicated by a red dot and the data point corresponding to the closest ROI in the image is selected in both the data table and the plot. Clicking on the image selects the corresponding row in the data table and highlights the corresponding point in the plot. If rows correspond to ROIs then the click position is indicated by a red dot and the data point corresponding to the closest ROI in the image is selected in both the data table and the plot.
* **A data table** area at the bottom of the screen. The data table shows the content of the uploaded data file. A tab allows switching to a second image viewer where images selected under image 2 in the data input section will appear. This second image viewer behaves like the one described above. The data table viewer uses pagination to show the data with a default of 10 rows per page which can be changed using the 'Show xx rows' button in the top left corner above the table. Clicking on a table row selects it and highlights the corresponding point in the plot. Multiple selection is possible which is why no image is shown when selecting table rows. The table is searchable globally using the 'Search' box in the top right corner above the table or by column using the boxes atop each column. Searches filter the rows to be displayed in the table. To select all the rows and highlight them in the plot, click the button labeled 'Show filtered rows in plot' above the table. To deselect all selected rows, click the 'Clear selection' button. * **A data table** area at the bottom of the screen. The data table shows the content of the uploaded data file. A tab allows switching to a second image viewer where images selected under image 2 in the data input section will appear. This second image viewer behaves like the one described above. Clicking on a table row selects it and highlights the corresponding point in the plot. No image is shown when selecting multiple rows. The table is searchable globally using the 'Search' box in the top right corner above the table or by column using the boxes atop each column. Searches filter the rows to be displayed in the table. To select all the rows and highlight them in the plot, click the button labeled 'Show filtered rows in plot' above the table. To deselect all selected rows, click the 'Clear selection' button. To annotate the selected rows, click the 'Annotate selection' button. This is only available if an annotation column has been chosen in the 'Annotate' section.
#### Data annotation
Individual data points, i.e. rows of the data table, can be associated with a label. Annotation starts by visiting the 'Annotate' section (accessible from the sidebar). There, a column to hold the annotations can be selected and labels defined. If an existing column is selected, its distinct values will be available as labels. New labels can also be added. Alternatively, a new column can be created, in which case, new labels must be provided. New labels must be entered as a comma-separated list. Once done, choices must be confirmed by clicking the 'Apply' button. Annotations can then be performed using the 'Annotate selection' button in the 'Explore' section.
#### Screenshot #### Screenshot
<img src="screenshots/image_data_explorer_v0.1.screenshot.png"/> <img src="screenshots/image_data_explorer_v0.2.screenshot.png"/>
...@@ -224,7 +224,8 @@ ui <- function(request) { ...@@ -224,7 +224,8 @@ ui <- function(request) {
## Enter annotation labels ## Enter annotation labels
uiOutput("annotationLabels") uiOutput("annotationLabels")
), ),
actionButton("annotateButton", "Apply") actionButton("annotateButton", "Apply", icon("check"),
style="color: #fff; background-color: #3C8DBC; border-color: #3C8DBC")
) )
) )
) )
...@@ -921,9 +922,13 @@ server <- function(input, output, session) { ...@@ -921,9 +922,13 @@ server <- function(input, output, session) {
if(length(new.labels)>0) { if(length(new.labels)>0) {
rv$annotationLabels <- c(rv$annotationLabels, new.labels) rv$annotationLabels <- c(rv$annotationLabels, new.labels)
} }
} }
# Move to the Explore tab if(is.null(rv$annotationLabels) || length(rv$annotationLabels) == 0) {
updateTabsetPanel(session, "menu", selected = "explore") showNotification("Some labels must be provided.", type ="error")
} else {
# Move to the Explore tab
updateTabsetPanel(session, "menu", selected = "explore")
}
}) })
## Stop the app when browser tab is closed ## Stop the app when browser tab is closed
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment