diff --git a/kvfinder-web-portal/R/mod_kvTutorial.R b/kvfinder-web-portal/R/mod_kvTutorial.R index fe650d8..de93693 100644 --- a/kvfinder-web-portal/R/mod_kvTutorial.R +++ b/kvfinder-web-portal/R/mod_kvTutorial.R @@ -11,27 +11,28 @@ kv_tutorial <- function() { fluidRow( column(12, align = "center", tags$h3(strong("Tutorial"))) ), - tags$br(), - - tags$p("This section is an introductory overview of KVFinder-web service features. Here, we are going to demonstrate how to use this KVFinder-web portal with our publicly available KVFinder-web service (", + tags$p("Welcome to the KVFinder-web service tutorial! This section provides an overview of the features available through our publicly available KVFinder-web service at (", tags$a(href = "https://kvfinder-web.cnpem.br", "kvfinder-web.cnpem.br"), ").", style = "text-align:justify" ), - tags$p("In this tutorial, we will explore the four execution modes of KVFinder-web service to identify and spatially characterize cavities, and retrieve a job from the web service via its ID."), + tags$p("In this tutorial, we will guide you through the four execution modes of KVFinder-web, which enable you to identify and characterize cavities in biomolecular structures. We will also show you how to retrieve results using job IDs."), tags$p( - "All biomolecular structures used in this tutorial are accessible via their PDB ID. The structures are:", - tags$li( - "Human Peroxisome Proliferator Activated Receptor Gamma (", - tags$a(href = "https://www.rcsb.org/structure/1PRG", "1PRG"), - ");" - ), - tags$li( - "HIV-1 Protease (", - tags$a(href = "https://www.rcsb.org/structure/1HVR", "1HVR"), - ")" + "For this tutorial, we will be using two biomolecular structures accessible via their PDB IDs:", + tags$ul( + tags$li( + "Human Peroxisome Proliferator Activated Receptor Gamma (", + tags$a(href = "https://www.rcsb.org/structure/1PRG", "1PRG"), + ");" + ), + tags$li( + "HIV-1 Protease (", + tags$a(href = "https://www.rcsb.org/structure/1HVR", "1HVR"), + ")" + ), ), + "By the end of this tutorial, you should have a good understanding of how to use KVFinder-web for cavity detection and characterization in your own biomolecular structures.", style = "text-align:justify" ), @@ -39,22 +40,12 @@ kv_tutorial <- function() { tags$h5(strong("Cavity Analysis")), ### Step 1. Load biomolecular structure from PDB tags$p( - "First of all, you must open ", - strong("Run Cavity Analysis"), - " tab to start your cavity analysis pipeline.", + "To start your cavity analysis pipeline, open the \"Run Cavity Analysis\" tab.", style = "text-align:justify" ), tags$p( - "After, you must load a target biomolecular structure into the ", - strong("Step 1. Choose input"), - ". For example, you could load human PPAR-gamma (1PRG) into KVFinder-web portal.", - "The ", - strong("Type of input"), - "must be set to 'Fetch from PDB'. Then, you must type '1PRG' in the ", - strong("PDB ID"), - "text box. Finally, click on the", - strong("Load"), - "button." + "Next, load your target biomolecular structure into \"Step 1. Choose Input\" by selecting \"Fetch from PDB\" as the input type and typing the PDB ID in the text box. For example, to analyze the human Peroxisome Proliferator Activated Receptor Gamma (1PRG), type \"1PRG\" and click \"Load\".", + style = "text-align:justify" ), tags$br(), fluidRow( @@ -62,7 +53,8 @@ kv_tutorial <- function() { ), tags$br(), tags$p( - "Upon successfully loading the structure from PDB database, an option to keep non-standard residues (e.g., water, ligands, ions, etc) will appear on the screen. For 1PRG, we want to avoid keeping water molecules for further analysis. So, we do not check 'HOH' on the checkbox." + "Once the structure is loaded, you will have the option to keep non-standard residues (such as water, ligands, ions, etc). For the 1PRG example, we do not want to keep water molecules for further analysis, so uncheck the \"HOH\" checkbox.", + style = "text-align:justify" ), tags$br(), fluidRow( @@ -79,9 +71,8 @@ kv_tutorial <- function() { #### Whole protein (default) tags$li(strong("Whole structure with default parameters")), tags$p( - "Here, you must select 'Whole structure (default)' in the ", - strong("Step 2. Choose run mode"), - ". The default parameters are designed to make a simple and fast whole structure detection." + "This mode is designed to make a simple and fast whole structure detection. To use it, select \"Whole structure (default)\" in the \"Step 2. Choose run mode\".", + style = "text-align:justify" ), tags$br(), fluidRow( @@ -91,9 +82,8 @@ kv_tutorial <- function() { ##### Submission tags$p( - "To submit any job to KVFinder-web service, just click on ", - strong("Submit the job"), - "button." + "To submit a job for cavity analysis, click on the \"Submit the job\" button.", + style = "text-align:justify" ), fluidRow( column(12, align = "center", tags$img(src = "www/tutorial-step2-wp-mode1-submit.png", align = "center")), @@ -105,10 +95,9 @@ kv_tutorial <- function() { "After successfully submitting the job to KVFinder-web service, a window will appear with the", strong("Job ID"), ". For instance, the Job ID of our submission is", - em("6524504029010759880"), - ". To check your submission, click on ", - strong("Check Results"), - "button." + em("12727934810399286938"), + ". To check your submission, click on \"Check Results\" button.", + style = "text-align:justify" ), fluidRow( column(12, align = "center", tags$img(src = "www/tutorial-step2-wp-mode1-info.png", align = "center")), @@ -116,21 +105,18 @@ kv_tutorial <- function() { ##### Job status tags$p( - "After completion, the ", - strong("Status"), - "field will change to", - strong("completed"), - "and turn green. Then, three buttons and a table with cavity names, volumes and areas will appear on the screen." + "After completion, the \"Status\" field will change to \"completed\" and turn green, indicating that the job has finished processing. Then, the following three buttons will appear, along with a table showing cavity characterizations:", + style = "text-align:justify" ), fluidRow( column(12, align = "center", tags$img(src = "www/tutorial-step3-wp-mode1-check-results.png", align = "center")), ), - tags$p("These three buttons are:", - tags$ol( + tags$p( + tags$ul( ###### 1 tags$li( - strong("Download cavities:"), - "Download a PDB-formatted file with the detected cavities;" + strong("Download Structures:"), + "Download a ZIP file with PDB-formatted files of the input and the cavities;" ), fluidRow( column(12, align = "center", tags$img(src = "www/tutorial-step3-wp-mode1-pdb.png", align = "center")), @@ -140,7 +126,7 @@ kv_tutorial <- function() { ###### 2 tags$li( strong("Download Results:"), - "Download a TOML-formatted file with characterizations (volume, area and surrounding residues) of the detected cavities and the detection parameters used in the cavity analysis;" + "Download a TOML-formatted file with characterizations (volume, area, average depth, maximum depth, average hydropathy and surrounding residues) of the detected cavities and the parameters used in the cavity analysis;" ), fluidRow( column(12, align = "center", tags$img(src = "www/tutorial-step3-wp-mode1-toml.png", align = "center")), @@ -160,17 +146,15 @@ kv_tutorial <- function() { style = "text-align:justify" ), tags$p( - "Furthermore, we can select a specific cavity to visualize in the interactive window. For instance, we select 'KAC' in the", - strong("Show cavity"), - "drop menu." + "Additionally, you can select a specific cavity to visualize in the interactive window by clicking on the corresponding name in the \"Select cavity\" drop menu. For instance, we select 'KAC' in the \"Select cavity\" drop menu.", + style = "text-align:justify" ), fluidRow( column(12, align = "center", tags$img(src = "www/tutorial-step3-wp-mode1-view2.png", align = "center")), ), tags$p( - "Still, we can show the residues surrounding the selected cavities by clicking on", - strong("Show interface residues"), - "check button." + "You can also show the residues surrounding the selected cavities by clicking on the \"Interface AA\" check button.", + style = "text-align:justify" ), fluidRow( column(12, align = "center", tags$img(src = "www/tutorial-step3-wp-mode1-view3.png", align = "center")), @@ -181,55 +165,51 @@ kv_tutorial <- function() { #### Whole protein (customized) tags$li(strong("Whole structure with customized parameters")), tags$p( - "Here, you must select 'Whole structure (customized)' into the ", - strong("Step 2. Choose run mode"), - "." + "To use customized parameters, select \"Whole structure (customized)\" in the \'Step 2. Choose run mode\".", + style = "text-align:justify" ), tags$p( - "KVFinder-web service is all about parameters customization of parKVFinder software. The detection parameters and their impact on cavity detection are explained in detail in the", - strong("Help"), - " tab. In summary, 'Probe In' defines the inner limits of the cavities, 'Probe Out' defines the outer limits of the cavities, 'Removal Distance' defines the length to be removed from the cavity-bulk boundary and 'Volume Cutoff' excludes cavities with volumes smaller than this limit. Let's show the effect of varying 'Volume Cutoff', 'Probe Out' and 'Removal Distance'." + "The KVFinder-web service allows users to customize detection parameters for the parKVFinder software. The parameters and their impact on cavity detection are explained in detail in the \"Help\" tab. To summarize, 'Probe In' defines the inner limits of cavities, 'Probe Out' defines the outer limits of cavities, 'Removal Distance' defines the length to be removed from the cavity-bulk boundary, and 'Volume Cutoff' excludes cavities with volumes smaller than the limit.", + style = "text-align:justify" ), tags$br(), + tags$p("To demonstrate the effect of changing these parameters, let's vary \"Volume Cutoff\", \"Probe Out\", and \"Removal Distance\":"), tags$ul( ##### Adjusting Volume Cutoff - tags$li(strong("Adjusting Volume Cutoff:"), "the Volume Cutoff limits the smaller cavity that would be identified. So, we set Volume Cutoff to 500 ų. Then, we submit the job to KVFinder-web service again."), - tags$p( - "After completion, display the job results by clicking on ", - strong("View"), "button." + tags$li( + strong("Adjusting Volume Cutoff:"), + "By setting \"Volume Cutoff\" to 500 ų, smaller cavities are excluded from detection. After submitting the job and viewing the results using the \"View\" button, we can see that fewer cavities are identified compared to the detection with default parameters.", + style = "text-align:justify" ), fluidRow( column(12, align = "center", tags$img(src = "www/tutorial-step3-wp-mode2-vc500.png", align = "center")), ), tags$br(), - tags$p("With a greater Volume Cutoff, we identified fewer cavities compared to the detection with default parameters."), - tags$br(), ##### Adjusting Probe Out - tags$li(strong("Adjusting Probe Out:"), "the Probe Out size changes the level of the cavity boundary. So, we set Probe Out to 8.0 Å and keep Volume Cutoff to 500 ų. Then, we submit the job to KVFinder-web service again."), - tags$p( - "After completion, display the job results by clicking on ", - strong("View"), "button." + tags$li( + strong("Adjusting Probe Out:"), + "By increasing the \"Probe Out\" size to 8.0 Å and keeping \"Volume Cutoff\" at 500 ų, the detected cavities have a higher boundary than those detected with a 4.0 Å probe. Therefore, by increasing the size of \"Probe Out\", the cavity boundary is also raised.", + style = "text-align:justify" ), fluidRow( column(12, align = "center", tags$img(src = "www/tutorial-step3-wp-mode2-po8-vc500.png", align = "center")), ), tags$br(), - tags$p("With a larger Probe Out, the detected cavities have a higher boundary than that detected with the 4.0 Å probe. Therefore, by increasing the size of the Probe Out, the cavity boundary is also raised."), - tags$br(), ##### Adjusting Removal Distance - tags$li(strong("Adjusting Removal Distance:"), "Besides adjusting the Probe Out size, we can also adjust the Removal Distance to change the cavity boundary. So, we set Removal Distance to 1.2 Å and the size of Probe Out back to 4.0 Å let's go back to the Main tab and change the Removal Distance to 1.2 Å, the size of Probe Out back to 4.0 Å and still keep Volume Cutoff to 500 ų. Then, we submit the job to KVFinder-web service again."), - tags$p( - "After completion, display the job results by clicking on ", - strong("View"), "button." + tags$li( + strong("Adjusting Removal Distance:"), + "Besides adjusting the \"Probe Out\" size, we can also adjust the \"Removal Distance\" to change the cavity boundary. By setting \"Removal Distance\" to 1.2 Å and keeping the size of \"Probe Out\" at 4.0 Å and \"Volume Cutoff\" at 500 ų, the detected cavities have a higher boundary than those detected with a 2.4 Å \"Removal Distance\". Therefore, by decreasing the \"Removal Distance\", the cavity boundary is also raised.", + style = "text-align:justify" ), fluidRow( column(12, align = "center", tags$img(src = "www/tutorial-step3-wp-mode2-rd12-vc500.png", align = "center")), ), - tags$br(), - tags$p("With a smaller Removal Distance, the detected cavities have a higher boundary than that detected with the 2.4 Å. Therefore, by decreasing the Removal Distance, the cavity boundary is also raised."), - tags$p("Therefore, changing the cavity boundary by varying Probe Out and Removal Distance also affects cavity segregation."), + tags$p( + "Therefore, changing the cavity boundary by varying \"Probe Out\" and \"Removal Distance\" also affects cavity segregation.", + style = "text-align:justify" + ), tags$br(), ), tags$br(), @@ -237,43 +217,52 @@ kv_tutorial <- function() { #### Steered detection tags$p( - "Another important feature of the parKVFinder is the steered detection of cavities. Here, instead of analyzing the PPAR-gamma structure, we are analyzing HIV-1 protease (PDB ID: 1HVR). First, we have to replicate", - strong("Step 1"), - "by replacing '1PRG' with '1HVR' and click on ", - strong("Load"), - "button again." + "Steered detection of cavities is another important feature of parKVFinder. To demonstrate this, we can analyze the HIV-1 protease structure (PDB ID: 1HVR) instead of the PPAR-gamma structure (PDB ID: 1PRG). To do this, we simply replace \"1PRG\" with \"1HVR\" in \"Step 1\" and click the \"Load\" button again.", + style = "text-align:justify" ), fluidRow( column(12, align = "center", tags$img(src = "www/tutorial-step1-load-1HVR.png", align = "center")), ), tags$br(), - tags$p("Upon successfully loading the structure from PDB database, we do not want to keep HIV-1 protease inhibitor, XK2 molecule, for further analysis. So, we do not check 'XK2' checkbox."), + tags$p( + "Upon successfully loading the structure, we can also exclude specific molecules, such as the HIV-1 protease inhibitor XK2, by not checking the corresponding checkbox.", + style = "text-align:justify" + ), fluidRow( - column(12, align = "center", tags$img(src = "www/tutorial-step1-include-non-standard-residues-1HVR.png", align = "center")), + column( + 12, + align = "center", tags$img(src = "www/tutorial-step1-include-non-standard-residues-1HVR.png", align = "center") + ), ), tags$br(), - tags$p("Then, we continue our tutorial by illustrating two distinct methods of cavity segmentation:"), + tags$p( + "Then, we continue our tutorial by illustrating two distinct methods of cavity segmentation:", + style = "text-align:justify" + ), #### Around target molecule tags$li(strong("Around target molecules")), - tags$p("Here, we can limit the search around a structure. Let's detect the cavities of HIV-1 protease, but limiting the search space around its inhibitor."), + tags$p( + "In this section, we will explore a method of cavity segmentation that limits the search around a specific structure. We will use this method to detect the cavities of HIV-1 protease while focusing on its inhibitor.", + style = "text-align:justify" + ), ##### Selecting target molecule tags$p( - "For that, you must select 'Around target molecule' into the ", - strong("Step 2. Choose run mode"), - ". After, you must select 'XK2' option in the ", - strong("Ligand or molecule name"), - "selection box. Then, we submit the job to KVFinder-web service again." + "To begin, select \"Around target molecule\" in \"Step 2. Choose run mode\". Next, select the \"XK2\" option in the Ligand or molecule name selection box. Then, submit the job to the KVFinder-web service.", + style = "text-align:justify" ), fluidRow( - column(12, align = "center", tags$img(src = "www/tutorial-step2-la-mode3.png", align = "center")), + column( + 12, + align = "center", tags$img(src = "www/tutorial-step2-la-mode3.png", align = "center") + ), ), ##### Visualiazing results tags$p( - "After completion, display the job results by clicking on ", - strong("View"), "button." + "Once the job is completed, click on the \"View\" button to display the job results.", + style = "text-align:justify" ), fluidRow( column(12, align = "center", tags$img(src = "www/tutorial-step3-la-mode3.png", align = "center")), @@ -286,9 +275,8 @@ kv_tutorial <- function() { ##### Selecting target residues tags$p( - "Here, we can limit the search around a closed region with a custom box, which is drawn based on a selection of residues and a padding. Let's detect again the cavities of HIV-1 protease, but limiting the search space around the residues", - em("27_A;27_B;34_A;34_B;51_A;51_B;"), - "and setting the padding to 0.5 Å. Then, we submit the job to KVFinder-web service again." + "This method allows us to limit the search around a closed region with a custom box, which is drawn based on a selection of residues and a padding. Let's detect the cavities of HIV-1 protease again, but this time limit the search space around residues \"27_A; 27_B; 34_A; 34_B; 51_A; and 51_B;\" and set the padding to 0.5 Å. Then, submit the job to KVFinder-web service.", + style = "text-align:justify" ), fluidRow( column(12, align = "center", tags$img(src = "www/tutorial-step2-ba-mode4.png", align = "center")), @@ -296,8 +284,8 @@ kv_tutorial <- function() { ##### Visualiazing results tags$p( - "After completion, display the job results by clicking on ", - strong("View"), "button." + "Once the job is completed, view the job results by clicking on the \"View\" button.", + style = "text-align:justify" ), fluidRow( column(12, align = "center", tags$img(src = "www/tutorial-step3-ba-mode4.png", align = "center")), @@ -309,13 +297,8 @@ kv_tutorial <- function() { ## Submitting an already sent job description tags$h5(strong("Submitting an already sent job")), tags$p( - "Users may submit a job that has already been submitted to the KVFinder-web service and the job is still available on the web service." - ), - tags$p( - "In this scenario, the", - strong("Status"), - "field will already be shown as ", - strong("completed") + "When a job has already been submitted to the KVFinder-web service and is still available, the \"Status\" field will already be shown as \"completed\".", + style = "text-align:justify" ), fluidRow( column(12, align = "center", tags$img(src = "www/tutorial-status-field-completed.png", align = "center")), @@ -324,19 +307,8 @@ kv_tutorial <- function() { tags$hr(), ## Retrieving a Job by its ID description - tags$h5(strong("Retrieving a Job by its ID")), - tags$p("Users may share their jobs with colleagues by the Job ID that they receive when submitting a job."), - tags$p( - "First, you must open ", - strong("Retrive results"), - ". After, you must fill a Job ID (e.g.,", - em("6524504029010759880"), - "- ID of our first job in this tutorial) in the ", - strong("Insert the job ID to get results"), - "text box and click on .", - strong("Get results"), - "button." - ), + tags$h5(strong("Retrieving a Job by ID")), + tags$p("Users can easily share their job results with colleagues by providing them with the job ID. To retrieve a job, navigate to the \"Retrieve results\" page and enter the job ID in the \"Insert the job ID to get results\" text box. Then click on the \"Get results\" button. For instace, \"12727934810399286938\" (ID of our first job in this tutorial)"), fluidRow( column(12, align = "center", tags$img(src = "www/tutorial-retrieve-job.png", align = "center")), ), @@ -344,9 +316,8 @@ kv_tutorial <- function() { ### Job exist tags$p( - "If the job was available in the KVFinder-web service, a field will appear with the Job ID Status. After completion, the", - strong("Status"), - "field will change to completed and turn green. Then, three buttons and a table with cavity names, volumes and areas will appear on the screen. Finally, we can display the job results by clicking on View button." + "If the job is still available on the KVFinder-web service, a field will appear with the Job ID Status. After the job is completed, the \"Status\" field will change to \"completed\" and turn green. At this point, three buttons and a table displaying cavity characterizations will appear on the screen. To view the job results, simply click on the \"View\" button.", + style = "text-align:justify" ), fluidRow( column(12, align = "center", tags$img(src = "www/tutorial-retrieve-job-results.png", align = "center")), @@ -354,7 +325,10 @@ kv_tutorial <- function() { tags$br(), ### Job does not exist - tags$p("Otherwise, the job does not exist or is not available in the KVFinder-web service anymore. In both situations, an error message will appear in the Job status field."), + tags$p( + "If the job does not exist or is no longer available on the KVFinder-web service, an error message will appear in the \"Status\" field.", + style = "text-align:justify" + ), fluidRow( column(12, align = "center", tags$img(src = "www/tutorial-retrieve-job-bad-id.png", align = "center")), ), diff --git a/kvfinder-web-portal/inst/app/www/tutorial-retrieve-job-results.png b/kvfinder-web-portal/inst/app/www/tutorial-retrieve-job-results.png index 4f756f1..453442f 100644 Binary files a/kvfinder-web-portal/inst/app/www/tutorial-retrieve-job-results.png and b/kvfinder-web-portal/inst/app/www/tutorial-retrieve-job-results.png differ diff --git a/kvfinder-web-portal/inst/app/www/tutorial-retrieve-job.png b/kvfinder-web-portal/inst/app/www/tutorial-retrieve-job.png index 2b10ec7..9948ac8 100644 Binary files a/kvfinder-web-portal/inst/app/www/tutorial-retrieve-job.png and b/kvfinder-web-portal/inst/app/www/tutorial-retrieve-job.png differ diff --git a/kvfinder-web-portal/inst/app/www/tutorial-step2-ba-mode4.png b/kvfinder-web-portal/inst/app/www/tutorial-step2-ba-mode4.png index 42724b7..61b904d 100644 Binary files a/kvfinder-web-portal/inst/app/www/tutorial-step2-ba-mode4.png and b/kvfinder-web-portal/inst/app/www/tutorial-step2-ba-mode4.png differ diff --git a/kvfinder-web-portal/inst/app/www/tutorial-step2-la-mode3.png b/kvfinder-web-portal/inst/app/www/tutorial-step2-la-mode3.png index 99cee1d..b198a08 100644 Binary files a/kvfinder-web-portal/inst/app/www/tutorial-step2-la-mode3.png and b/kvfinder-web-portal/inst/app/www/tutorial-step2-la-mode3.png differ diff --git a/kvfinder-web-portal/inst/app/www/tutorial-step2-wp-mode1-info.png b/kvfinder-web-portal/inst/app/www/tutorial-step2-wp-mode1-info.png index 5e22fa9..453d4d9 100644 Binary files a/kvfinder-web-portal/inst/app/www/tutorial-step2-wp-mode1-info.png and b/kvfinder-web-portal/inst/app/www/tutorial-step2-wp-mode1-info.png differ diff --git a/kvfinder-web-portal/inst/app/www/tutorial-step3-ba-mode4.png b/kvfinder-web-portal/inst/app/www/tutorial-step3-ba-mode4.png index 3931f7a..96a1dac 100644 Binary files a/kvfinder-web-portal/inst/app/www/tutorial-step3-ba-mode4.png and b/kvfinder-web-portal/inst/app/www/tutorial-step3-ba-mode4.png differ diff --git a/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-check-results.png b/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-check-results.png index e411c79..7fb435f 100644 Binary files a/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-check-results.png and b/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-check-results.png differ diff --git a/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-pdb.png b/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-pdb.png index 8a7557f..df0d51a 100644 Binary files a/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-pdb.png and b/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-pdb.png differ diff --git a/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-toml.png b/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-toml.png index 12cba78..0868032 100644 Binary files a/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-toml.png and b/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-toml.png differ diff --git a/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-view.png b/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-view.png index 612577a..a173aa9 100644 Binary files a/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-view.png and b/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-view.png differ diff --git a/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-view2.png b/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-view2.png index 2593f3f..55b2148 100644 Binary files a/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-view2.png and b/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-view2.png differ diff --git a/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-view3.png b/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-view3.png index b659359..4a18edf 100644 Binary files a/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-view3.png and b/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode1-view3.png differ diff --git a/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode2-po8-vc500.png b/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode2-po8-vc500.png index 660883a..0bbde48 100644 Binary files a/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode2-po8-vc500.png and b/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode2-po8-vc500.png differ diff --git a/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode2-rd12-vc500.png b/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode2-rd12-vc500.png index 2e32abc..41cc68e 100644 Binary files a/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode2-rd12-vc500.png and b/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode2-rd12-vc500.png differ diff --git a/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode2-vc500.png b/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode2-vc500.png index 8ac14e8..f8e8207 100644 Binary files a/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode2-vc500.png and b/kvfinder-web-portal/inst/app/www/tutorial-step3-wp-mode2-vc500.png differ