Merge pull request #835 from NeurodataWithoutBorders/improve-screenshots

Update Screenshots for 1.0.0 Release
NeurodataWithoutBorders · Jun 5, 2024 · fcd7415 · fcd7415
2 parents 47c1331 + b28edf0
commit fcd7415
Show file tree

Hide file tree

Showing 74 changed files with 123 additions and 64 deletions.
diff --git a/docs/assets/tutorials/dandi/api-token-added.png b/docs/assets/tutorials/dandi/api-token-added.png
diff --git a/docs/assets/tutorials/dandi/api-tokens.png b/docs/assets/tutorials/dandi/api-tokens.png
diff --git a/docs/assets/tutorials/dandi/create-dandiset.png b/docs/assets/tutorials/dandi/create-dandiset.png
diff --git a/docs/assets/tutorials/dandi/dandiset-id.png b/docs/assets/tutorials/dandi/dandiset-id.png
diff --git a/docs/assets/tutorials/dandi/review-page.png b/docs/assets/tutorials/dandi/review-page.png
diff --git a/docs/assets/tutorials/dataset-created.png b/docs/assets/tutorials/dataset-created.png
diff --git a/docs/assets/tutorials/dataset-creation.png b/docs/assets/tutorials/dataset-creation.png
diff --git a/docs/assets/tutorials/home-page.png b/docs/assets/tutorials/home-page.png
diff --git a/docs/assets/tutorials/multiple/all-interfaces-added.png b/docs/assets/tutorials/multiple/all-interfaces-added.png
diff --git a/docs/assets/tutorials/multiple/conversion-results-page.png b/docs/assets/tutorials/multiple/conversion-results-page.png
diff --git a/docs/assets/tutorials/multiple/fail-name.png b/docs/assets/tutorials/multiple/fail-name.png
diff --git a/docs/assets/tutorials/multiple/format-options.png b/docs/assets/tutorials/multiple/format-options.png
diff --git a/docs/assets/tutorials/multiple/formats-page.png b/docs/assets/tutorials/multiple/formats-page.png
diff --git a/docs/assets/tutorials/multiple/home-page-complete.png b/docs/assets/tutorials/multiple/home-page-complete.png
diff --git a/docs/assets/tutorials/multiple/info-page.png b/docs/assets/tutorials/multiple/info-page.png
diff --git a/docs/assets/tutorials/multiple/inspect-page.png b/docs/assets/tutorials/multiple/inspect-page.png
diff --git a/docs/assets/tutorials/multiple/interface-added.png b/docs/assets/tutorials/multiple/interface-added.png
diff --git a/docs/assets/tutorials/multiple/metadata-ecephys.png b/docs/assets/tutorials/multiple/metadata-ecephys.png
diff --git a/docs/assets/tutorials/multiple/metadata-nwbfile.png b/docs/assets/tutorials/multiple/metadata-nwbfile.png
diff --git a/docs/assets/tutorials/multiple/metadata-page.png b/docs/assets/tutorials/multiple/metadata-page.png
diff --git a/docs/assets/tutorials/multiple/metadata-subject-complete.png b/docs/assets/tutorials/multiple/metadata-subject-complete.png
diff --git a/docs/assets/tutorials/multiple/pathexpansion-autocomplete-filled.png b/docs/assets/tutorials/multiple/pathexpansion-autocomplete-filled.png
diff --git a/docs/assets/tutorials/multiple/pathexpansion-autocomplete-open.png b/docs/assets/tutorials/multiple/pathexpansion-autocomplete-open.png
diff --git a/docs/assets/tutorials/multiple/pathexpansion-autocomplete-submitted.png b/docs/assets/tutorials/multiple/pathexpansion-autocomplete-submitted.png
diff --git a/docs/assets/tutorials/multiple/pathexpansion-basepath.png b/docs/assets/tutorials/multiple/pathexpansion-basepath.png
diff --git a/docs/assets/tutorials/multiple/pathexpansion-completed.png b/docs/assets/tutorials/multiple/pathexpansion-completed.png
diff --git a/docs/assets/tutorials/multiple/pathexpansion-page.png b/docs/assets/tutorials/multiple/pathexpansion-page.png
diff --git a/docs/assets/tutorials/multiple/preview-page.png b/docs/assets/tutorials/multiple/preview-page.png
diff --git a/docs/assets/tutorials/multiple/search-behavior.png b/docs/assets/tutorials/multiple/search-behavior.png
diff --git a/docs/assets/tutorials/multiple/sourcedata-page.png b/docs/assets/tutorials/multiple/sourcedata-page.png
diff --git a/docs/assets/tutorials/multiple/subject-complete.png b/docs/assets/tutorials/multiple/subject-complete.png
diff --git a/docs/assets/tutorials/multiple/subject-error.png b/docs/assets/tutorials/multiple/subject-error.png
diff --git a/docs/assets/tutorials/multiple/subject-invalid.png b/docs/assets/tutorials/multiple/subject-invalid.png
diff --git a/docs/assets/tutorials/multiple/subject-page.png b/docs/assets/tutorials/multiple/subject-page.png
diff --git a/docs/assets/tutorials/multiple/valid-name.png b/docs/assets/tutorials/multiple/valid-name.png
diff --git a/docs/assets/tutorials/multiple/workflow-page.png b/docs/assets/tutorials/multiple/workflow-page.png
diff --git a/docs/assets/tutorials/pipelines/created.png b/docs/assets/tutorials/pipelines/created.png
diff --git a/docs/assets/tutorials/pipelines/list.png b/docs/assets/tutorials/pipelines/list.png
diff --git a/docs/assets/tutorials/single/all-interfaces-added.png b/docs/assets/tutorials/single/all-interfaces-added.png
diff --git a/docs/assets/tutorials/single/conversion-results-page.png b/docs/assets/tutorials/single/conversion-results-page.png
diff --git a/docs/assets/tutorials/single/fail-name.png b/docs/assets/tutorials/single/fail-name.png
diff --git a/docs/assets/tutorials/single/format-options.png b/docs/assets/tutorials/single/format-options.png
diff --git a/docs/assets/tutorials/single/formats-page.png b/docs/assets/tutorials/single/formats-page.png
diff --git a/docs/assets/tutorials/single/home-page-complete.png b/docs/assets/tutorials/single/home-page-complete.png
diff --git a/docs/assets/tutorials/single/info-page.png b/docs/assets/tutorials/single/info-page.png
diff --git a/docs/assets/tutorials/single/inspect-page.png b/docs/assets/tutorials/single/inspect-page.png
diff --git a/docs/assets/tutorials/single/interface-added.png b/docs/assets/tutorials/single/interface-added.png
diff --git a/docs/assets/tutorials/single/metadata-ecephys.png b/docs/assets/tutorials/single/metadata-ecephys.png
diff --git a/docs/assets/tutorials/single/metadata-nwbfile.png b/docs/assets/tutorials/single/metadata-nwbfile.png
diff --git a/docs/assets/tutorials/single/metadata-page.png b/docs/assets/tutorials/single/metadata-page.png
diff --git a/docs/assets/tutorials/single/metadata-subject-complete.png b/docs/assets/tutorials/single/metadata-subject-complete.png
diff --git a/docs/assets/tutorials/single/preview-page.png b/docs/assets/tutorials/single/preview-page.png
diff --git a/docs/assets/tutorials/single/search-behavior.png b/docs/assets/tutorials/single/search-behavior.png
diff --git a/docs/assets/tutorials/single/sourcedata-page-specified.png b/docs/assets/tutorials/single/sourcedata-page-specified.png
diff --git a/docs/assets/tutorials/single/sourcedata-page.png b/docs/assets/tutorials/single/sourcedata-page.png
diff --git a/docs/assets/tutorials/single/valid-name.png b/docs/assets/tutorials/single/valid-name.png
diff --git a/docs/assets/tutorials/single/workflow-page.png b/docs/assets/tutorials/single/workflow-page.png
diff --git a/docs/developer_guide.rst b/docs/developer_guide.rst
@@ -215,6 +215,20 @@ To see if someone else has developed a third-party component to fit your needs,
 useful to search for third-party packages (e.g. Handsontable) that implement the feature you need.
 
 
+.. _documentation:
+
+Documentation
+-------------
+
+Updating Tutorial Screenshots
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+Before a release, you'll want to update the tutorial screenshots to reflect the latest changes in the application.
+
+#. To regenerate the dataset, you'll need to change ``regenerateTestData`` in the ``tests/e2e/config.ts`` to ``true``.
+#. Run the End-to-End Tests locally using ``npm test:app``.
+    - This will generate new screenshots in the ``docs/assets/tutorials`` directory.
+#. Review the new screenshots to ensure they are accurate.
+#. If the screenshots are accurate, commit them to the repository. Their paths should be consistent across runs—allowing the new versions to show up on the tutorial.
 
 .. _testing:
 

diff --git a/docs/tutorials/dataset_publication.rst b/docs/tutorials/dataset_publication.rst
@@ -4,9 +4,9 @@ Dataset Publication
 For this tutorial, we'll be adapting the previous :doc:`Multi-Session Tutorial </tutorials/multiple_sessions>` to publish our data to the DANDI Archive.
 
 .. note::
-    Creating an account on DANDI requires approval from the archive administrators. Separate approval is required for both the main archive and the staging server.
+    Creating an account on DANDI requires approval from the archive administrators. Separate approval is required for both the main archive and the development server.
 
-    **This tutorial requires an account on the** :dandi-staging:`DANDI staging server <>`. You’ll want to publish your `real` data on the main archive, which will require a separate approval but otherwise follows the same workflow defined in this tutorial.
+    **This tutorial requires an account on the** :dandi-staging:`DANDI Development server <>`. You’ll want to publish your `real` data on the main archive, which will require a separate approval but otherwise follows the same workflow defined in this tutorial.
 
     Once your account is approved, you can move on to the next steps.
 
@@ -24,7 +24,7 @@ You'll now notice that the **Exit Pipeline** button has been replaced with **Nex
 
 DANDI Upload
 ------------
-You’ll need to specify your DANDI API keys if you haven’t uploaded from the GUIDE before. These keys are unique between the Main and Staging servers.
+You’ll need to specify your DANDI API keys if you haven’t uploaded from the GUIDE before. These keys are unique between the Main and Development servers.
 
 .. figure:: ../assets/tutorials/dandi/api-tokens.png
   :align: center
@@ -34,9 +34,9 @@ To get your API key, visit the :dandi-staging:`staging website <>` and click on
 
 .. figure:: ../assets/dandi/api-token-location.png
   :align: center
-  :alt: DANDI staging API key added
+  :alt: DANDI Development server API key added
 
-Provide this for the Staging API Key value on the GUIDE.
+Provide this for the Development API Key value on the GUIDE.
 
 .. figure:: ../assets/tutorials/dandi/api-token-added.png
   :align: center
@@ -48,7 +48,7 @@ But what if you don't have any Dandisets to upload to? No problem!
 
 Creating a Dandiset
 ^^^^^^^^^^^^^^^^^^^
-If you don't already have a Dandiset on the Staging server, you can create one directly from the GUIDE.
+If you don't already have a Dandiset on the Development server, you can create one directly from the GUIDE.
 
 Press the **Create New Dandiset** button to open a pop-up that guides you through the required fields for Dandiset creation.
 

diff --git a/docs/tutorials/index.rst b/docs/tutorials/index.rst
@@ -6,17 +6,17 @@ to the Neurodata Without Borders (NWB) format and uploading to the DANDI Archive
 In these tutorials, you'll follow along on a :doc:`local installation of the GUIDE </installation>` as we detail the conversion process from initial setup to final upload.
 
 .. note::
-    This tutorial focuses on uploading to the Staging server.
+    This tutorial focuses on uploading to the DANDI Development server.
 
-    **When working with real data, you'll want to publish to the Main Archive**. In this case, follow the same steps outlined here—except replace the Staging server with the Main Archive.
+    **When working with real data, you'll want to publish to the Main Archive**. In this case, follow the same steps outlined here—except replace the Development server with the Main Archive.
 
 .. note::
 
-   If you intend to complete the Dataset Publication section of this tutorial, you'll need to create an account on the DANDI Archive. This will need to be approved by the archive administrators and will require separate approval for both the main archive and the staging server.
+    If you intend to complete the Dataset Publication section of this tutorial, you'll need to create an account on the DANDI Archive. This will need to be approved by the archive administrators and will require separate approval for both the main archive and the development server.
 
-    **This tutorial requires an account on the** :dandi-staging:`DANDI staging server <>`.
+    **This tutorial requires an account on the** :dandi-staging:`DANDI Development server <>`.
 
-    We recommend that you create an account on the staging server before you begin the tutorials.
+    We recommend that you create an account on the Development server before you begin the tutorials.
 
 Before you begin these tutorials, **you'll need to generate the tutorial dataset** using the instructions on the Dataset page.
 

diff --git a/docs/tutorials/multiple_sessions.rst b/docs/tutorials/multiple_sessions.rst
@@ -10,10 +10,10 @@ Workflow Configuration
 
 Update the Workflow page to indicate that you'll:
 
-1. Run on multiple sessions
-2. Locate the source data programmatically
-3. Find source files inside ``~/NWB_GUIDE/test-data/dataset``, where **~** is the home directory of your system.
-4. Skip dataset publication.
+#. Run on multiple sessions
+#. Locate the source data programmatically
+#. Specify your dataset location ``~/NWB_GUIDE/test-data/multi_session_dataset``, where **~** is the home directory of your system.
+#. Skip dataset publication.
 
 .. figure:: ../assets/tutorials/multiple/workflow-page.png
   :align: center
@@ -48,7 +48,7 @@ To avoid specifying the format string path by hand, we can take advantage of **A
   :align: center
   :alt: Autocomplete modal on path expansion page
 
-Provide an example source data path (for example, the ``mouse1_Session1_g0_t0.imec0.lf.bin`` file for SpikeGLX), followed by the Subject (``mouse1``) and Session ID (``Session1``) for this particular path.
+Provide an example source data path (for example, the ``multi_session_dataset/mouse1/mouse1_Session2/mouse1_Session2_phy`` file for Phy), followed by the Subject (``mouse1``) and Session ID (``Session1``) for this particular path.
 
 .. figure:: ../assets/tutorials/multiple/pathexpansion-autocomplete-filled.png
   :align: center
@@ -60,7 +60,7 @@ When you submit this form, you’ll notice that the Format String Path input has
   :align: center
   :alt: Path expansion page with autocompleted format string
 
-Repeat this process for Phy, where ``mouse1_Session2_phy`` will be the example source data path.
+Repeat this process for SpikeGLX, where ``multi_session_dataset/mouse1/mouse1_Session2/mouse1_Session2_g0/mouse1_Session2_g0_imec0/mouse1_Session1_g0_t0.imec0.lf.bin`` will be the example source data path.
 
 .. figure:: ../assets/tutorials/multiple/pathexpansion-completed.png
   :align: center
@@ -100,7 +100,7 @@ One notable difference between this and the single-session workflow, however, is
 
 Session Metadata
 ----------------
-Aside from the session manager and global metadata features noted above, the file metadata page in the multi-session workflow is nearly identical to the single-session version.
+Aside from the session manager, the file metadata page in the multi-session workflow is nearly identical to the single-session version.
 
 .. figure:: ../assets/tutorials/multiple/metadata-nwbfile.png
   :align: center

diff --git a/docs/tutorials/single_session.rst b/docs/tutorials/single_session.rst
@@ -17,7 +17,7 @@ Project Structure
 Project Setup
 ^^^^^^^^^^^^^
 
-The Project Setup page will have you define two pieces of information about your pipeline: the **name** and, optionally, the **output location** for your NWB files.
+The Project Setup page will have you define two pieces of information about your pipeline: the **name** and, optionally, the **output location** for your NWB files. We will not be specifying an output location in this tutorial—so your NWB files will be saved to the default location.
 
 You’ll notice that the name property has a red asterisk next to it, which identifies it as a required property.
 
@@ -83,11 +83,11 @@ Data Entry
 
 Source Data Information
 ^^^^^^^^^^^^^^^^^^^^^^^
-On this page, specify the **.ap.bin** (SpikeGLX) file and **phy** folder so that the GUIDE can find this source data to complete the conversion.
+On this page, specify the **phy** folder and **.ap.bin** (SpikeGLX) file so that the GUIDE can find this source data to complete the conversion.
 
-As discussed in the :doc:`Dataset Generation </tutorials/dataset>` tutorial, these can be found in the ``~/NWB_GUIDE/test-data/data`` directory, where **~** is the home directory of your system.
+As discussed in the :doc:`Dataset Generation </tutorials/dataset>` tutorial, these can be found in the ``~/NWB_GUIDE/test-data/single_session_data`` directory, where **~** is the home directory of your system.
 
-You can either click the file selector to navigate to the file or drag-and-drop into the GUIDE from your file navigator.
+Within each data format accordion, you'll find a file selector that will accept relevant source data. You can either click this to navigate to your files or drag-and-drop into the GUIDE from your file navigator.
 
 .. figure:: ../assets/tutorials/single/sourcedata-page-specified.png
   :align: center

diff --git a/src/electron/frontend/core/components/forms/GlobalFormModal.ts b/src/electron/frontend/core/components/forms/GlobalFormModal.ts
@@ -37,8 +37,10 @@ export function createFormModal ({
     formProps,
     hasInstances = false
 }: BaseFormModalOptions & { onSave: Function }) {
+
     const modal = new Modal({
-        header
+        header,
+        onClose: () => modal.remove()
     })
 
     const content = document.createElement("div")

diff --git a/src/electron/frontend/core/components/pages/guided-mode/data/GuidedPathExpansion.js b/src/electron/frontend/core/components/pages/guided-mode/data/GuidedPathExpansion.js
@@ -45,6 +45,7 @@ export async function autocompleteFormatString(path) {
 
     const modal = new Modal({
         header: `${interfaceName} — Autocomplete Format String`,
+        onClose: () => modal.remove(),
     });
 
     const content = document.createElement("div");

diff --git a/src/electron/frontend/core/components/pages/guided-mode/data/GuidedSourceData.js b/src/electron/frontend/core/components/pages/guided-mode/data/GuidedSourceData.js
@@ -256,7 +256,10 @@ export class GuidedSourceDataPage extends ManagedPage {
 
                         header.append(h2, small);
 
-                        const modal = new Modal({ header });
+                        const modal = new Modal({
+                            header,
+                            onClose: () => modal.remove(),
+                        });
 
                         let alignment;
 

diff --git a/src/electron/frontend/core/components/pages/guided-mode/options/GuidedUpload.js b/src/electron/frontend/core/components/pages/guided-mode/options/GuidedUpload.js
@@ -41,6 +41,7 @@ export class GuidedUploadPage extends Page {
                 icon: keyIcon,
                 label: "API Keys",
                 onClick: () => {
+                    document.body.append(this.globalModal);
                     this.globalModal.form.results = structuredClone(global.data.DANDI?.api_keys ?? {});
                     this.globalModal.open = true;
                 },
@@ -61,9 +62,10 @@ export class GuidedUploadPage extends Page {
     connectedCallback() {
         super.connectedCallback();
 
-        const modal = (this.globalModal = createFormModal.call(this, {
+        this.globalModal = createFormModal.call(this, {
             header: "DANDI API Keys",
             schema: dandiGlobalSchema.properties.api_keys,
+            onClose: () => this.globalModal.remove(),
             onSave: async (form) => {
                 const apiKeys = form.resolved;
 
@@ -90,8 +92,7 @@ export class GuidedUploadPage extends Page {
                     if (name.includes("api_key")) return await validateDANDIApiKey(value, name.includes("staging"));
                 },
             },
-        }));
-        document.body.append(modal);
+        });
     }
 
     disconnectedCallback() {
@@ -170,9 +171,11 @@ export class GuidedUploadPage extends Page {
                                 buttonStyles: {
                                     width: "max-content",
                                 },
-                                onClick: async () => {
-                                    await createDandiset.call(this, { title: this.form.resolved.dandiset });
-                                    this.requestUpdate();
+                                onClick: () => {
+                                    const result = createDandiset.call(this, { title: this.form.resolved.dandiset });
+                                    const { modal, done } = result;
+                                    done.then(() => this.requestUpdate());
+                                    return modal;
                                 },
                             }),
                         ],
@@ -187,7 +190,7 @@ export class GuidedUploadPage extends Page {
         // Confirm that one api key exists
         promise.then(() => {
             const api_keys = global.data.DANDI?.api_keys;
-            if (!api_keys || !Object.keys(api_keys).length) this.globalModal.open = true;
+            if (!api_keys || !Object.keys(api_keys).length) this.header.controls[0].onClick(); // Add modal and open it
         });
 
         const untilResult = until(promise, html`Loading form contents...`);

diff --git a/src/electron/frontend/core/components/pages/guided-mode/setup/Preform.js b/src/electron/frontend/core/components/pages/guided-mode/setup/Preform.js
@@ -63,6 +63,12 @@ const questions = {
         },
     },
 
+    upload_to_dandi: {
+        type: "boolean",
+        title: "Will you publish data on DANDI?",
+        default: true,
+    },
+
     file_format: {
         type: "string",
         enum: ["hdf5", "zarr"],
@@ -85,12 +91,6 @@ const questions = {
             "<span>Dataset chunking, compression, etc.</span><br><small>This also allows you to change file formats per-session</small>",
         default: false,
     },
-
-    upload_to_dandi: {
-        type: "boolean",
-        title: "Will you publish data on DANDI?",
-        default: true,
-    },
 };
 
 // -------------------------------------------------------------------------------------------

diff --git a/src/electron/frontend/core/components/pages/inspect/InspectPage.js b/src/electron/frontend/core/components/pages/inspect/InspectPage.js
@@ -49,6 +49,13 @@ export class InspectPage extends Page {
         return result;
     };
 
+    #modal;
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.#modal) this.#modal.remove();
+    }
+
     showReport = async (value) => {
         if (!value) {
             const message = "Please provide filesystem entries to inspect.";
@@ -92,10 +99,11 @@ export class InspectPage extends Page {
             },
         });
 
-        const modal = new Modal({
+        this.#modal = new Modal({
             header: value.length === 1 ? value : `Selected Filesystem Entries`,
             controls: [downloadJSONButton, downloadTextButton],
             footer: legend,
+            onClose: () => this.#modal.remove(),
         });
 
         const container = document.createElement("div");
@@ -108,10 +116,9 @@ export class InspectPage extends Page {
 
         container.append(list);
 
-        modal.append(container);
-        document.body.append(modal);
-
-        modal.toggle(true);
+        this.#modal.append(container);
+        document.body.append(this.#modal);
+        this.#modal.toggle(true);
     };
 
     form = new JSONSchemaForm({

diff --git a/src/electron/frontend/core/components/pages/settings/SettingsPage.js b/src/electron/frontend/core/components/pages/settings/SettingsPage.js
@@ -229,6 +229,14 @@ export class SettingsPage extends Page {
 
     #releaseNotesModal;
 
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.#releaseNotesModal) {
+            this.#releaseNotesModal.remove();
+            this.#releaseNotesModal = null;
+        }
+    }
+
     // Populate the Update Available display
     updated() {
         const updateDiv = this.querySelector("#update-available");
@@ -255,6 +263,7 @@ export class SettingsPage extends Page {
 
                 const modal = (this.#releaseNotesModal = new Modal({
                     header: `Release Notes`,
+                    onClose: () => modal.remove(),
                 }));
 
                 const releaseNotes = document.createElement("div");