Merge pull request #166 from revisit-studies/2.3

2.3

Author: JackWilb

blog/2024-06-20-release-1.0.md

@@ -42,7 +42,7 @@ ReVISit is implemented as a (mostly) server-less application, meaning that you d
 
 If you’re running a local study, you can get away without this – you can just download the data from your browser after a study is complete. For online studies, we use Google Firebase to store data.
 
-Currently, [setting up Firebase for a reVISit study](https://revisit.dev/docs/data-and-deployment/firebase/firebase-setup/) might be the most challenging part of working with reVISit. On the plus side, Firebase is a tried-and-true system where you have full control over your data. You even have options to choose the locale of your server so that you are compliant with your country's regulations on data storage. 
+Currently, [setting up Firebase for a reVISit study](https://revisit.dev/docs/data-and-deployment/firebase/setup/) might be the most challenging part of working with reVISit. On the plus side, Firebase is a tried-and-true system where you have full control over your data. You even have options to choose the locale of your server so that you are compliant with your country's regulations on data storage. 
 
 ### Data Analysis
 

docs/analysis/data-export.md

@@ -1,6 +1,5 @@
 # Data Export and Basic Analysis
 
-
 reVISit allows you to export in [Tidy](https://cran.r-project.org/web/packages/tidyr/vignettes/tidy-data.html) format for analysis in Python notebooks or R.
 
 The exported tidy data includes all the responses from the participants, including the participant ID, trial ID, trial order, and response ID. Additionally, we provide the parameters and correct answers that were set in the study configuration file (or by dynamic block). This data can be used to analyze the performance of participants, the accuracy of responses, and the time taken to complete the study.
@@ -129,6 +128,35 @@ To download audio from specific participants, select the participants in the tab
 If you are using Firebase, it will download the transcript of the audio file as well.
 :::
 
+## Download Screen Recording 
+
+There are two ways to download screen recording video files if you have enabled `recordScreen: true` in your study. For applying screen recording feature in your study, please visit [Record Screen](../../designing-studies/record-screen).
+
+### Download Participants' Audio
+
+1. Navigate to the **Analysis** platform for the current study.
+
+2. Open the **Participant View**, then click on the **Download participants screen recording** button.
+
+![Download participants screen recording](./img/screen-recording-export-all.png)
+
+:::note
+To download screen recording from specific participants, select the participants in the table.
+:::
+
+
+### Download Single Participant's Screen Recording
+
+1. Navigate to the **Analysis** platform for the current study.
+
+2. Open the **Participant View**, then expand the participant’s timeline by clicking the expand button.
+![Download task audio](./img/audio-export-task-1.png)
+
+3. Click on the task.
+![Download task audio](./img/audio-export-task-2.png)
+
+3. Click on the **Download Screen Recording** button.
+![Download screen recording video](./img/screen-recording-export-single.png)
 
 
 import StructuredLinks from '@site/src/components/StructuredLinks/StructuredLinks.tsx';

docs/analysis/img/screen-recording-export-all.png

@@ -1,6 +1,6 @@
 # Connecting to a Cloud Database
 
-ReVISit is inherently a serverless program. As such, we developed a storage engine architecture in order to store the data that is gathered from users as they move through the study. While you can test the program locally using the browser's local storage, you will need to set up some sort of cloud database in order to save study participant data. Our intention is that those who create the study have full control over the data that is generated by participants -- no data is ever linked back to the reVISit repository or those who have contributed to its creation. See the <a href="#deploying-to-a-static-website">Deployment</a> section for more information about deploying your study to GitHub.io once the connection to Firebase has been set up.
+ReVISit is inherently a serverless program. As such, we developed a storage engine architecture in order to store the data that is gathered from users as they move through the study. While you can test the program locally using the browser's local storage, you will need to set up some sort of cloud database in order to save study participant data. Our intention is that those who create the study have full control over the data that is generated by participants -- no data is ever linked back to the reVISit repository or those who have contributed to its creation. See the <a href="../deploying-to-static-website">Deployment</a> section for more information about deploying your study to GitHub.io once the connection to Firebase has been set up.
 
 We provide multiple storage engines and an abstract class that you can extend to create your own storage engine. There are two cloud databases that reVISit supports out of the box: Firebase and Supabase. Firebase is a Google product that provides a real-time NoSQL database and storage solution, while Supabase is an open-source alternative that provides similar functionality that can be self-hosted (perfect for researchers who operate under strict data privacy regulations).
 

docs/analysis/img/screen-recording-export-single.png

@@ -1,7 +1,5 @@
 # Deploying To a Static Website
 
-
-
 ## Deploying using GitHub
 
 Deploying your study should be relatively simple. We include a GitHub action that will build your study and deploy it to GitHub pages. The only item that the user must adjust is in the `.env` file in the root of the repository. At the top of this file, you should see `VITE_BASE_PATH="/study/"`. Change "/study/" to `"/<repo-name>/"`.
@@ -31,7 +29,7 @@ Here we will be able to deploy the site to the Github pages. In the 'Branch' sec
 Click 'Save' once you have made the switch. After a short period of time, your reVISit application will deploy to `<username>.github.io/<repository-name>`. If you want to deploy to a custom domain, you can do that as well by following the instructions on [GitHub](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site).
 
 :::info
-If you would like to enable admin sign ins when you deploy your static website, you will have to make sure that Firebase has your domain name set as an authorized domain. Please see [here](../firebase/adding-removing-ui/#adding-authorized-domains) to add your custom domain.
+If you would like to enable admin sign ins when you deploy your static website, you will have to make sure that Firebase has your domain name set as an authorized domain. Please see [here](../firebase/enabling-authentication/#adding-authorized-domains) to add your custom domain.
 :::
 
 ## Deploying using Netlify
@@ -62,12 +60,12 @@ The first build will take a bit, but once it runs, your experiment should be rea
 
 If you are using netlify as a secondary venue for anonymization purposes, you can specify which branch netlify will use to deploy from. For instance a branch called `for-review' might remove all personnel and affiliation information.
 
-
+<!--   Importing Links -->
 import StructuredLinks from '@site/src/components/StructuredLinks/StructuredLinks.tsx';
 
 <StructuredLinks
-referenceLinks={[
-{name: "GitHub Pages", url: "https://docs.github.com/en/pages/quickstart"},
-{name: "GitHub Custom Domain", url: "https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site"}
-]}
+  referenceLinks={[
+    {name: "GitHub Pages", url: "https://docs.github.com/en/pages/quickstart"},
+    {name: "GitHub Custom Domain", url: "https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site"}
+  ]}
 />

docs/data-and-deployment/connecting-to-cloud-database.md

@@ -1,16 +1,8 @@
 # Setting Up Authentication
 
-import StructuredLinks from '@site/src/components/StructuredLinks/StructuredLinks.tsx';
-
-<StructuredLinks
-    referenceLinks={[
-        {name: "Firebase Setup", url: "../firebase-setup"},
-        {name: "Firebase Authentication", url: "https://firebase.google.com/products/auth"},
-    ]}
-/>
 
 :::warning
-In order to use authentication, you must have a Firebase application already configured. To set up your firebase application, please see [here](../firebase-setup).
+In order to use authentication, you must have a Firebase application already configured. To set up your firebase application, please see [here](../setup).
 :::
 
 ## Enabling Authentication in Firebase
@@ -41,7 +33,7 @@ Once you have deployed your reVISit application to a website, you'll need to ens
 Note that if your application has been deployed but you have _not_ added your custom authorized domain, then attempting to enable authentication will result in an error.
 :::
 
-Through the navigation panel on the right of your reVISit application, navigate to the "settings" page. Here, you will see that authentication will be currently disabled with a button to enable authentication.
+Through the settings cog on the right of your reVISit application, navigate to the "settings" page. Here, you will see that authentication will be currently disabled with a button to enable authentication.
 
 When you first enable authentication, you will be prompted to sign in using Google SSO. The account chosen will automatically be added as a user. Any other account attempting to log in to reVISit and access these protected routes will be redirected to the login screen.
 
@@ -54,3 +46,13 @@ To add another administrator, simply navigate to the settings page (where you en
 ### Removing A User
 
 In the "Enabled Users" section, you will see the "delete" icon to the right of each user aside from yourself. Any administrator is capable of deleting any user from the reVISit system. The only restriction is that you cannot delete yourself and there can never be less than one user.
+
+<!--   Importing Links -->
+import StructuredLinks from '@site/src/components/StructuredLinks/StructuredLinks.tsx';
+
+<StructuredLinks
+    referenceLinks={[
+        {name: "Firebase Setup", url: "../setup"},
+        {name: "Firebase Authentication", url: "https://firebase.google.com/products/auth"},
+    ]}
+/>

docs/data-and-deployment/deploying-to-static-website.md

@@ -1,15 +1,5 @@
 # Configuring Firebase
 
-import StructuredLinks from '@site/src/components/StructuredLinks/StructuredLinks.tsx';
-
-<StructuredLinks
-    referenceLinks={[
-        {name: "Firebase", url: "https://firebase.google.com/"},
-        {name: "Firebase Tier Limits", url: "https://cloud.google.com/storage/pricing#cloud-storage-always-free"},
-        {name: "Google Recaptcha", url: "https://www.google.com/recaptcha/admin/create"},
-        {name: "Deploying to GitHub", url: "../../deploying-to-static-website"}
-    ]}
-/>
 
 <a href="https://firebase.google.com/" target="_blank" >Firebase</a> is an app development platform that has extremely useful tools such as storage and real-time synchronization. With Firebase alone, a study creator can capture all data from participants and then export that data for further analysis. In what follows, there are two main products we will be using: the Firestore database and Firebase's storage product.
 
@@ -120,7 +110,7 @@ We are now going to set up the authentication so that your browser is authorized
 ![Console](./img/firebase_steps/step15.jpg)
 
 :::info
-In addition to what is shown above, you will want to enable "Google Authentication" in the same section of Firebase. You can do this by choosing the "Google" sign in method under the "Additional Providers" section. The anonymous sign-in is used for particpants taking the study. It allows them to access and send data to the Firestore without external authentication. The Google sign-in method is used to authenticate administrators for managing studies and data. Please see [here](../adding-removing-ui) for more detailed authentication information and set up instructions.
+In addition to what is shown above, you will want to enable "Google Authentication" in the same section of Firebase. You can do this by choosing the "Google" sign in method under the "Additional Providers" section. The anonymous sign-in is used for particpants taking the study. It allows them to access and send data to the Firestore without external authentication. The Google sign-in method is used to authenticate administrators for managing studies and data. Please see [here](../enabling-authentication) for more detailed authentication information and set up instructions.
 :::
 
 #### App Check
@@ -213,3 +203,15 @@ When running `yarn build`, reVISit automatically uses the Firebase storage engin
 ### Deployment
 
 If you intending to deploy your reVISit application to a static website, we suggest following our [guide to deploy to Github pages](../../deploying-to-static-website). In this, you'll see that there is an additional step that you will need to follow in Firebase so that your custom domain can authorize users.
+
+<!--   Importing Links -->
+import StructuredLinks from '@site/src/components/StructuredLinks/StructuredLinks.tsx';
+
+<StructuredLinks
+    referenceLinks={[
+        {name: "Firebase", url: "https://firebase.google.com/"},
+        {name: "Firebase Tier Limits", url: "https://cloud.google.com/storage/pricing#cloud-storage-always-free"},
+        {name: "Google Recaptcha", url: "https://www.google.com/recaptcha/admin/create"},
+        {name: "Deploying to GitHub", url: "../../deploying-to-static-website"}
+    ]}
+/>

…eployment/firebase/adding-removing-ui.md …ment/firebase/enabling-authentication.mddocs/data-and-deployment/firebase/adding-removing-ui.md renamed to docs/data-and-deployment/firebase/enabling-authentication.md docs/data-and-deployment/firebase/adding-removing-ui.md renamed to docs/data-and-deployment/firebase/enabling-authentication.md

@@ -0,0 +1,49 @@
+# Setting Up Authentication
+
+:::warning
+In order to use authentication, you must have a Supabase application already configured. To set up your Supabase application, please see [here](../setup).
+:::
+
+## Enabling Authentication in Supabase
+
+Supabase provides a variety of authentication methods, but reVISit only supports GitHub OAuth for authentication. To enable GitHub OAuth, start by navigating to GitHub and creating a new OAuth application [here](http://github.com/settings/developers). 
+
+Give your application a name, such as `ReVISit Supabase`. For the "Homepage URL", enter the URL where your reVISit application will be hosted (e.g., `https://my-revisit-app.com`). This must include the `https://` prefix.
+
+Lastly set the "Authorization callback URL" to `https://<your-supabase-domain>/auth/v1/callback`, replacing `<your-supabase-domain>` with your actual Supabase domain (e.g., `https://supabase.organizaion.com/auth/v1/callback`).
+
+![GitHub OAuth Setup](./img/github-oauth-setup.png)
+
+After creating the OAuth application, you will be provided with a Client ID. Copy this in to the `supabase/.env` file in the `GITHUB_OAUTH_CLIENT_ID` field.
+
+Next, generate a new Client Secret by clicking the "Generate a new client secret" button. Copy this in to the `supabase/.env` file in the `GITHUB_OAUTH_CLIENT_SECRET` field.
+
+Now, set the `GITHUB_OAUTH_REDIRECT_URI` field in the `supabase/.env` file to the same URL you used for the "Authorization callback URL" in GitHub.
+
+Finally, ensure that your `SITE_URL` field in the `supabase/.env` file is set to the URL where your reVISit application will be hosted (e.g., `https://my-revisit-app.com/study`). If this is not set, the redirects won't work properly.
+
+## Enabling Authentication in reVISit
+
+Through the settings cog on the right of your reVISit application, navigate to the "settings" page. Here, you will see that authentication will be currently disabled with a button to enable authentication.
+
+When you first enable authentication, you will be prompted to sign in using GitHub Oauth. The account chosen will automatically be added as a user. Any other account attempting to log in to reVISit and access these protected routes will be redirected to the login screen.
+
+## Manage Administrators in reVISit
+
+### Adding Additional Users
+
+To add another administrator, simply navigate to the settings page (where you enabled authentication) and click on the 'Add User' icon to the right of the "Enable Users" section. Enter the Google account email for the user and click save. They will now be an administrator and will immediately be able to log into your reVISit application
+
+### Removing A User
+
+In the "Enabled Users" section, you will see the "delete" icon to the right of each user aside from yourself. Any administrator is capable of deleting any user from the reVISit system. The only restriction is that you cannot delete yourself and there can never be less than one user.
+
+<!--   Importing Links -->
+import StructuredLinks from '@site/src/components/StructuredLinks/StructuredLinks.tsx';
+
+<StructuredLinks
+    referenceLinks={[
+        {name: "Supabase Setup", url: "../setup"},
+        {name: "Supabase Authentication", url: "https://supabase.com/docs/guides/auth"},
+    ]}
+/>