Skip to content

Update DocumentationPage.vue #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
May 6, 2025
Merged

Update DocumentationPage.vue #24

Changes from 5 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f4ad652
Update DocumentationPage.vue
guittari Mar 10, 2025
f6f3473
Minor edits
guittari Mar 10, 2025
47eb0d6
Minor updates
guittari Mar 10, 2025
657178b
Update DocumentationPage.vue
guittari Mar 10, 2025
f5c4a2f
Reverting to main branch to modify with drop-down edit
guittari Apr 3, 2025
4d4179c
Merge branch 'main' into 21-adding-a-preamble-to-the-documentation-page
NEStock Apr 30, 2025
a22cfce
Fix failing test with yarn run v1.22.22
NEStock May 1, 2025
206394a
Quasar-ify documentation page. Make images use responsive sizing
NEStock May 5, 2025
c35d9c3
implement scrolling
NEStock May 5, 2025
5b62385
Prettier formatting
NEStock May 5, 2025
e92304e
Merge pull request #44 from aplbrain/nicole-21-adding-a-preamble-to-t…
NEStock May 6, 2025
06b2fc5
Merge branch 'main' into 21-adding-a-preamble-to-the-documentation-page
NEStock May 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 87 additions & 36 deletions frontend/src/pages/DocumentationPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,59 @@
<q-card-section>
<div class="text-h2">Uploading to and Downloading Data from the EMBER-DANDI Archive</div>
<p>
These instructions describe how to upload to and download data from the EMBER-DANDI
Archive. The instructions are divided into two main sections: one set of instructions
for novice users, and one set for experienced users of DANDI. Navigate to a section
depending on your experience with each tool.
EMBER is the BRAIN Initiative data archive for multi-modal neurophysiological and behavioral data. It serves as a platform for storing, sharing, and accessing multi-modal neurophysiological and behavioral data. These instructions will guide you on how to use the EMBER-DANDI Archive to upload and download data. The workflow varies based on the data file structures and object types involved.
</p>
<p>
Please follow the instructions for the option that best fits your needs:
</p>
<p style="padding-left: 20px; margin-bottom: 0;">
<strong><span class="dark-red-text">My files are all in NWB and BIDS:</span></strong> There is one set of instructions for novice users, and one set for experienced users of DANDI. Navigate to a section depending on your experience with each tool:
<ol style="padding-left: 50px; margin-top: 0;margin-bottom: 0;">
<li>I'm new to Python, CLI, and/or DANDI</li>
<ul>
<li> Set up Python and your environment, install DANDI CLI </li>
<li> How do I upload data? </li>
</ul>
<li> I've used DANDI or CLI tools before</li>
</ol>
</p>
<p style="padding-left: 20px;">
<strong><span class="dark-red-text">My files are in a mix of standards or I do not use standards:</span></strong> Please contact the EMBER team at <LinkText text="[email protected]" uri="mailto:[email protected]/" /> to facilitate data ingestion into the EMBER Data Archive. We are also happy to add you to our Slack workspace.
</p>

<div class="page-break"></div> <!-- Visual page break -->

<div class="text-h5"> <strong> <span class="dark-red-text">Downloading Data: </span> </strong></div>
<p>
Before getting started, please review how to download data:
</p>
<div class="text-h6">How do I download existing data?</div>
<p>To download the whole dataset:</p>
<ol style="margin-top: 0;">
<li> Make sure you have the DANDI CLI tool installed </li>
<li>Click the "Download" tab on the right-hand panel</li>
<li>Copy the command into your python terminal and hit enter</li>

<div class="text-h5">I'm new to Python, CLI, and/or DANDI</div>
</ol>
<img src="/documentation-images/download_dandiset.png" alt="Download Dandiset" />

<div class="text-h6">How do I download a specific file?</div>
<p>To download specific files:</p>
<ol style="margin-top: 0;">
<li>Navigate to the URL of the dataset of interest</li>
<li>Click on the "Files" tab on the right-hand panel</li>
<li>Navigate to the folder containing the desired file</li>
<li>Click the downward pointing arrow icon to download the file</li>
</ol> <!-- This is where the closing tag for the ol should be -->
<img
src="/documentation-images/files_tab.png"
alt="Files Tab"
style="width: 1200px; height: auto"
/>

<div class="page-break"></div> <!-- Visual page break -->

<div class="text-h5"> <strong> <span class="dark-red-text"> 1. I'm new to Python, CLI, and/or DANDI: </span> </strong></div>
<p>
If you're new to Python, follow these instructions to get Python and a virtual Anaconda
environment installed:
Expand All @@ -25,7 +71,6 @@
<li>After installing, launch the Anaconda Navigator</li>
<li>Navigate to the "Environments" tab on the left pane</li>
<li>Create a new environment with your desired name</li>

<img
src="/documentation-images/anaconda_navigator.png"
alt="Anaconda Navigator"
Expand All @@ -36,10 +81,16 @@
Click on the newly created environment, press the "Play" icon and select "Open
Terminal"
</li>

<li>
In the python terminal in your ember-dandi specific environment, install the DANDI Client: <pre> pip install -U dandi</pre>
</li>


</ol>

<div class="text-h6">How do I upload data?</div>
<ol>
<ol style="margin-top: 0;">
<li>
Create a GitHub account
<LinkText text="here" uri="https://github.com/" />
Expand All @@ -58,15 +109,15 @@
</ol>

<div class="text-h6">Convert files to appropriate standards</div>
<ol>
<ol style="margin-top: 0;">
<li>
<LinkText
text="Install NWB GUIDE"
uri="https://nwb-guide.readthedocs.io/en/stable/installation.html"
/>
, which converts common neuroscience data formats into Neurodata Without Borders
standards
, a desktop application that converts common neuroscience data formats into data standards (Neurodata Without Borders) to enable uploading to EMBER-DANDI
</li>

<li>
Complete key tutorials for NWB GUIDE:
<ul>
Expand All @@ -76,13 +127,15 @@
uri="https://nwb-guide.readthedocs.io/en/stable/tutorials/dataset.html"
/>
</li>

<li>
Convert
<LinkText
text="a single session of data"
uri="https://nwb-guide.readthedocs.io/en/stable/tutorials/single_session.html"
/>
</li>

<li>
Convert
<LinkText
Expand All @@ -91,10 +144,12 @@
/>
</li>
</ul>

</li>
<li>Repeat with your own your data</li>
<li>Repeat steps with your own your data</li>

<li>
Ensure your data is supported by checking the
All data formats are not currently supported! Ensure your data is supported by checking the
<LinkText
text="ecosystem compatibility"
uri="https://nwb-guide.readthedocs.io/en/stable/format_support.html"
Expand All @@ -108,7 +163,7 @@
</ol>

<div class="text-h6">Create an EMBER-DANDIset</div>
<ol>
<ol style="margin-top: 0;">
<li>Log in to EMBER-DANDI with your approved GitHub account</li>
<li>Select the "New Dandiset" button in the top right corner</li>
<li>Fill out basic metadata and hit "Register Dandiset"</li>
Expand All @@ -119,8 +174,10 @@
/>
</ol>


<div class="text-h6">Upload the converted files</div>
<ol>

<ol style="margin-top: 0;">
<li>
In the python terminal in your ember-dandi specific environment, run: `pip install -U
dandi`
Expand Down Expand Up @@ -148,28 +205,10 @@ dandi upload -i ember
<img src="/documentation-images/API_key.png" alt="API Key" style="width: 500px; height: auto;">
</pre>
</li>
</ol>
<div class="text-h6">How do I download existing data?</div>
<p>To download the whole dataset:</p>
<ol>
<li>Click the "Download" tab on the right-hand panel</li>
<li>Copy the command into your python terminal</li>
</ol>
<img src="/documentation-images/download_dandiset.png" alt="Download Dandiset" />
<p>To download specific files:</p>
<ol>
<li>Navigate to the URL of the dataset of interest</li>
<li>Click on the "Files" tab on the right-hand panel</li>
<img
src="/documentation-images/files_tab.png"
alt="Files Tab"
style="width: 1200px; height: auto"
/>
<li>Navigate to the folder containing the desired file</li>
<li>Click the downward pointing arrow icon to download the file</li>
</ol>
</ol>
<div class="page-break"></div> <!-- Visual page break -->

<div class="text-h5">I've used DANDI or CLI tools before!</div>
<div class="text-h5"><strong> <span class="dark-red-text"> 2. I've used DANDI or CLI tools before: </span> </strong></div>
<p>For experienced users, the steps for uploading data are as follows:</p>
<pre class="commands">
dandi download https://dandi.emberarchive.org/dandiset/&lt;dataset_id&gt;/draft
Expand All @@ -182,9 +221,10 @@ dandi upload -i ember
>
<p>
For downloading data, use the standard procedures from the DANDI documentation
<LinkText text="here" uri="https://docs.dandiarchive.org/12_download/" />
<LinkText text="here" uri="https://docs.dandiarchive.org/12_download/"/>
.
</p>

</q-card-section>
</q-card>
</div>
Expand All @@ -203,4 +243,15 @@ import PageTitle from 'src/components/PageTitle.vue';
.commands {
margin-left: 40px; /* Indent the command block */
}

.dark-red-text {
color: #8B0000; /* Dark red color */
}

.page-break {
margin-top: 50px; /* Adds vertical space */
border-top: 2px solid #ccc; /* Adds a horizontal line */
padding-top: 20px; /* Adds padding above the next content for separation */
}

</style>
Loading