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

Show file tree
Hide file tree
Changes from all 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
2 changes: 1 addition & 1 deletion frontend/src/css/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,5 +81,5 @@ body {
* - top margin ensures the component is below the toolbar on scroll
*/
.scrollable {
scroll-margin-top: 80px;
scroll-margin-top: 110px;
}
239 changes: 157 additions & 82 deletions frontend/src/pages/DocumentationPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,42 +4,144 @@
<div class="q-mx-xl">
<q-card flat class="q-mt-lg">
<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>
<div class="q-pl-md">
<div class="text-primary text-bold">My files are all in NWB and BIDS:</div>
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:
<div class="q-pl-md">
<ol>
<li clickable @click="scrollTo(ref(experiencedUserSection))" class="cursor-pointer">
I've used DANDI or CLI tools before
</li>
<li clickable @click="scrollTo(ref(newUserSection))" class="cursor-pointer">
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>
</ol>
</div>
</div>
<div class="q-pl-md">
<div class="text-primary text-bold">
My files are in a mix of standards or I have not used standards:
</div>
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.
</div>
</q-card-section>
<q-separator class="q-my-lg" />
<q-card-section>
<div class="text-h3">
<span class="text-primary text-bold">Downloading Data</span>
</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>
</ol>
<div class="row flex-center">
<img
class="self-center col-4"
src="/documentation-images/download_dandiset.png"
alt="Download Dandiset"
/>
</div>

<div class="text-h5">I'm new to Python, CLI, and/or DANDI</div>
<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>

<div class="row flex-center">
<img
src="/documentation-images/files_tab.png"
alt="Files Tab"
class="self-center col-10"
/>
</div>
</q-card-section>
<q-separator class="q-my-lg" />
<q-card-section>
<div class="text-h3 q-mb-lg">
<span class="text-primary text-bold">Uploading Data</span>
</div>
<div class="text-h5 scrollable" ref="experiencedUserSection">
<span class="text-primary text-bold">1. I've used DANDI or CLI tools before: </span>
</div>
<p>For experienced users, the steps for uploading data are as follows:</p>
<q-card flat class="bg-grey-2 q-ml-lg q-py-xs q-px-md">
<pre><code>dandi download https://dandi.emberarchive.org/dandiset/&lt;dataset_id&gt;/draft
cd &lt;dataset_id&gt;
dandi organize "source_folder" -f dry
dandi organize "source_folder"
dandi validate .
dandi upload -i ember</code></pre>
</q-card>
<p>
For downloading data, use the standard procedures from the DANDI documentation
<LinkText text="here" uri="https://docs.dandiarchive.org/12_download/" />
.
</p>
</q-card-section>
<q-card-section>
<div class="text-h5 scrollable" ref="newUserSection">
<span class="text-primary text-bold">2. I'm new to Python, CLI, and/or DANDI: </span>
</div>
<p>
If you're new to Python, follow these instructions to get Python and a virtual Anaconda
environment installed:
</p>

<div class="text-h6">How do I install Python?</div>
There are many ways to install and use Python, so we've highlighted one common way to get
you started.
<ol>
<li>
<LinkText text="Install Anaconda" uri="https://www.anaconda.com/docs/main" /> to get
Python and standard data science/machine learning packages, and a desktop application
<LinkText
text="Install Anaconda"
uri="https://www.anaconda.com/docs/getting-started/getting-started"
/>
to get Python and standard data science/machine learning packages, and a desktop
application
</li>
<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"
style="width: 1000px; height: auto"
/>

<li>
Click on the newly created environment, press the "Play" icon and select "Open
Terminal"
</li>
</ol>

<div class="text-h6">
How do I install the
<LinkText text="DANDI CLient" uri="https://pypi.org/project/dandi/" />?
</div>
<q-card flat class="bg-grey-2 q-ml-lg q-py-xs q-px-md">
<pre><code>pip install -U dandi</code></pre>
</q-card>

<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 +160,16 @@
</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 +179,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 @@ -92,35 +197,35 @@
</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"
/>
</li>
<img
src="/documentation-images/ecosystem.png"
alt="Ecosystem"
style="width: 850px; height: auto"
/>
</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>
<img
src="/documentation-images/register_new_dandiset.png"
alt="New Dandiset"
style="width: 1200px; height: auto"
/>
<div class="row flex-center">
<img
src="/documentation-images/register_new_dandiset.png"
alt="New Dandiset"
class="self-center col-8"
/>
</div>
</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 All @@ -130,77 +235,47 @@
files: `dandi validate --ignore DANDI.NO_DANDISET_FOUND "source_folder"`
</li>
<li>Navigate to your dataset in the EMBER-DANDI archive and note the ID number</li>
<img
src="/documentation-images/test_number_data.png"
alt="Test Number Data"
style="width: 900px; height: auto"
/>
<div class="row flex-center">
<img
src="/documentation-images/test_number_data.png"
alt="Test Number Data"
class="self-center col-8"
/>
</div>
<li>
Upload your validated .nwb files using the following commands, replacing
`&lt;dataset_id&gt;` and `source_folder` with your specific information:
<pre>
dandi download https://dandi.emberarchive.org/dandiset/&lt;dataset_id&gt;/draft
<q-card flat class="bg-grey-2 q-ml-lg q-py-xs q-px-md">
<pre><code>dandi download https://dandi.emberarchive.org/dandiset/&lt;dataset_id&gt;/draft
cd &lt;dataset_id&gt;
dandi organize "source_folder" -f dry
dandi organize "source_folder"
dandi validate .
dandi upload -i ember
<img src="/documentation-images/API_key.png" alt="API Key" style="width: 500px; height: auto;">
</pre>
dandi upload -i ember</code></pre>
</q-card>
</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>

<div class="text-h5">I've used DANDI or CLI tools before!</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
cd &lt;dataset_id&gt;
dandi organize "source_folder" -f dry
dandi organize "source_folder"
dandi validate .
dandi upload -i ember
</pre
>
<p>
For downloading data, use the standard procedures from the DANDI documentation
<LinkText text="here" uri="https://docs.dandiarchive.org/12_download/" />
.
</p>
<div class="row flex-center">
<img src="/documentation-images/API_key.png" alt="API Key" class="self-center col-4" />
</div>
</q-card-section>
</q-card>
</div>
</q-page>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import LinkText from 'src/components/LinkText.vue';
import PageTitle from 'src/components/PageTitle.vue';
import { scrollTo } from 'src/utils/scroll';

const experiencedUserSection = ref<HTMLElement | null>(null);
const newUserSection = ref<HTMLElement | null>(null);
</script>

<style scoped>
.q-item__section > .text-overline {
font-size: 1rem;
}
.commands {
margin-left: 40px; /* Indent the command block */
}
</style>