Skip to content

Commit f5c4a2f

Browse files
guittariguittari
committed
Reverting to main branch to modify with drop-down edit
2 parents 657178b + 941d039 commit f5c4a2f

File tree

11 files changed

+192
-114
lines changed

11 files changed

+192
-114
lines changed

‎README.md‎

Lines changed: 2 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,10 @@
11
# Ember Archive web application
22

3-
This repository contains the code for the front-end website for the NIH-funded BBQS EMBER Data Archive, allowing users to view information about the program, search projects, and submit data.
4-
5-
## Prerequisities
6-
7-
- [Node.js](https://nodejs.org/en) v20
8-
- Yarn
9-
10-
## Install
11-
12-
### Frontend
13-
14-
1. Install dependencies
15-
16-
```bash
17-
yarn install
18-
```
3+
This repository contains the web application code for the NIH-funded Brain Behavior Quantification and Synchronization (BBQS) Ecosystem for Multi-modal Brain-behavior Experimentation and Research (EMBER) Data Archive. This web application allows users to view information about the program, search projects, and submit data.
194

205
## Development
216

22-
### Frontend
23-
24-
1. Start the application in development mode
25-
26-
```bash
27-
yarn quasar dev
28-
```
29-
30-
1. The frontend should now be running at [http://localhost:9000](). The application will reload as you make edits.
31-
32-
33-
## Deployment
34-
35-
7+
- Please refer to the [frontend][frontend/] README.md
368

379
## Contributing
3810

‎frontend/.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
20.15.1

‎frontend/README.md‎

Lines changed: 46 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,61 @@
1-
# EMBER Web App (frontend)
1+
# EMBER Archive Frontend
22

3-
A Quasar Project
3+
A Vue.js 3 / Quasar Project
44

5-
## Install the dependencies
5+
## Prerequisities
66

7-
```bash
8-
yarn
9-
# or
10-
npm install
11-
```
7+
- [Node.js](https://nodejs.org/en) v20
8+
- We recommend using `nvm` to manage Node.js versions. Follow the instructions [here](https://github.com/nvm-sh/nvm) for Linux or [here](https://github.com/coreybutler/nvm-windows) for Windows.
129

13-
### Start the app in development mode (hot-code reloading, error reporting, etc.)
10+
## Install
1411

15-
```bash
16-
quasar dev
17-
```
12+
1. (Recommend) Ensure you have `nvm` installed and enabled
1813

19-
### Lint the files
14+
```bash
15+
nvm on
16+
nvm use
17+
```
2018

21-
```bash
22-
yarn lint
23-
# or
24-
npm run lint
25-
```
19+
_Note: For Windows users, if you needed to modify any environment variables, make sure you close and restart any terminals before trying to run nvm or npm commands_
20+
21+
- nvm use will activate the Node.js version specified in frontend/.nvmrc
2622

27-
### Format the files
23+
1. Install dependencies
2824

2925
```bash
30-
yarn format
31-
# or
32-
npm run format
26+
yarn install
3327
```
3428

35-
### Build the app for production
29+
## Development
3630

37-
```bash
38-
quasar build
39-
```
31+
1. Start the application in development mode
32+
33+
```bash
34+
yarn quasar dev
35+
```
36+
37+
1. The frontend should now be running at [http://localhost:9000](). The application will reload as you make edits.
38+
39+
## Testing
40+
41+
Our repository includes automated testing and formatting checks using GitLab CI/CD. The following is a list of tests that are run in the pipeline:
42+
43+
- Frontend Linting
44+
45+
- Job: lint-test-frontend
46+
- Description: Checks that frontend code follows linting rules using ESLint.
47+
- Steps to Run:
48+
49+
```bash
50+
yarn run lint
51+
```
52+
53+
- Frontend Formatting
4054

41-
### Customize the configuration
55+
- Job: format-test-frontend
56+
- Description: Checks that frontend code is formatted correctly using Prettier.
57+
- Steps to Run:
4258

43-
See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).
59+
```bash
60+
yarn run format
61+
```

‎frontend/src/constants/links.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,6 @@ export const links: Record<string, Link> = {
3030
text: 'Distributed Archives for Neurophysiology Data Integration (DANDI)',
3131
uri: 'https://dandiarchive.org/',
3232
},
33-
dabi_full: {
34-
text: 'Data Archive for the BRAIN Initiative (DABI)',
35-
uri: 'https://dabi.loni.usc.edu/',
36-
},
3733
open_data: {
3834
text: 'Open Data',
3935
uri: 'https://aws.amazon.com/opendata',

‎frontend/src/constants/mainLayout.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Tab } from 'src/models/mainLayout';
2+
3+
export const defaultTabs: Tab[] = [
4+
{ name: 'Projects', route: '/projects', external: false },
5+
{ name: 'Data', route: 'https://dandi.emberarchive.org/', external: true },
6+
{
7+
name: 'Getting Started',
8+
route: '/getting-started',
9+
external: false,
10+
dropdown: {
11+
show: false,
12+
children: [{ name: 'Documentation', route: '/documentation', external: false }],
13+
},
14+
},
15+
{ name: 'Tools', route: '/tools', external: false },
16+
{ name: 'Metadata', route: '/metadata', external: false },
17+
{ name: 'About', route: '/about', external: false },
18+
];

‎frontend/src/layouts/MainLayout.vue‎

Lines changed: 106 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
<template>
22
<q-layout view="lHh Lpr lFf">
3-
<q-header elevated class="bg-white" :class="$q.screen.gt.xs ? 'q-px-xl' : ''">
4-
<q-toolbar class="text-primary row items-stretch">
3+
<q-header elevated class="bg-white">
4+
<div class="col-12 bg-grey-3 text-black text-body2 text-center">
5+
This repository is under review for potential modification in compliance with Administration
6+
directives.
7+
</div>
8+
<q-toolbar class="text-primary row items-stretch" :class="$q.screen.gt.sm ? 'q-px-xl' : ''">
59
<q-btn
610
to="/"
711
class="q-py-md"
@@ -11,30 +15,96 @@
1115
icon-right="img:ember-logo.png"
1216
/>
1317
<q-space />
14-
<q-tabs v-if="$q.screen.gt.xs" class="row items-stretch">
15-
<q-btn
16-
v-for="tab in tabs"
17-
:key="tab.name"
18-
:label="tab.name"
19-
:to="tab.route"
20-
:href="tab.external ? tab.route : undefined"
21-
:target="tab.external ? '_blank' : undefined"
22-
flat
23-
class="full-height"
24-
>
25-
<q-icon v-if="tab.external" class="q-ml-sm" size="xs" name="launch" />
26-
</q-btn>
18+
<!-- Large screens: display tabs acorss the top -->
19+
<q-tabs v-if="$q.screen.gt.sm" class="row items-stretch">
20+
<div v-for="tab in tabs" :key="tab.name" class="full-height">
21+
<q-route-tab
22+
:label="tab.name"
23+
:to="tab.external ? undefined : tab.route"
24+
:href="tab.external ? tab.route : undefined"
25+
:target="tab.external ? '_blank' : undefined"
26+
@mouseenter="
27+
() => {
28+
if (tab.dropdown) tab.dropdown.show = true;
29+
}
30+
"
31+
flat
32+
class="full-height"
33+
>
34+
<q-icon v-if="tab.external" class="q-ml-sm" size="xs" name="launch" />
35+
<q-menu
36+
v-if="tab.dropdown"
37+
v-model="tab.dropdown.show"
38+
fit
39+
auto-close
40+
anchor="bottom middle"
41+
self="top middle"
42+
@mouseleave="
43+
() => {
44+
if (tab.dropdown) tab.dropdown.show = false;
45+
}
46+
"
47+
>
48+
<q-list>
49+
<q-item
50+
v-for="subtab in tab.dropdown.children"
51+
:key="subtab.name"
52+
:to="subtab.route"
53+
:href="subtab.external ? subtab.route : undefined"
54+
:target="subtab.external ? '_blank' : undefined"
55+
class="text-primary items-center"
56+
>
57+
{{ subtab.name }}
58+
</q-item>
59+
</q-list>
60+
</q-menu>
61+
</q-route-tab>
62+
</div>
2763
</q-tabs>
28-
<q-btn-dropdown v-if="$q.screen.lt.sm" auto-close stretch flat label="Menu">
64+
<!-- Small Screens: display tabs in a menu dropdown -->
65+
<q-btn-dropdown v-if="$q.screen.lt.md" auto-close stretch flat label="Menu">
2966
<q-list>
3067
<q-item
3168
v-for="tab in tabs"
3269
:key="tab.name"
33-
:to="tab.route"
70+
:to="tab.external ? undefined : tab.route"
71+
:href="tab.external ? tab.route : undefined"
72+
@mouseenter="
73+
() => {
74+
if (tab.dropdown) tab.dropdown.show = true;
75+
}
76+
"
3477
clickable
35-
class="toolbar-link"
78+
class="toolbar-link items-center"
3679
>
37-
<q-item-section>{{ tab.name }}</q-item-section>
80+
{{ tab.name }}
81+
<q-icon v-if="tab.external" class="q-ml-sm" size="xs" name="launch" />
82+
<q-menu
83+
v-if="tab.dropdown"
84+
v-model="tab.dropdown.show"
85+
fit
86+
auto-close
87+
anchor="center left"
88+
self="center right"
89+
@mouseleave="
90+
() => {
91+
if (tab.dropdown) tab.dropdown.show = false;
92+
}
93+
"
94+
>
95+
<q-list>
96+
<q-item
97+
v-for="subtab in tab.dropdown.children"
98+
:key="subtab.name"
99+
:to="subtab.route"
100+
:href="subtab.external ? subtab.route : undefined"
101+
:target="subtab.external ? '_blank' : undefined"
102+
class="text-primary items-center"
103+
>
104+
{{ subtab.name }}
105+
</q-item>
106+
</q-list>
107+
</q-menu>
38108
</q-item>
39109
</q-list>
40110
</q-btn-dropdown>
@@ -66,21 +136,28 @@
66136
</template>
67137

68138
<script setup lang="ts">
139+
import { defaultTabs } from 'src/constants/mainLayout';
69140
import { Tab } from 'src/models/mainLayout';
141+
import { ref } from 'vue';
70142
71-
const tabs: Tab[] = [
72-
{ name: 'Projects', route: '/projects' },
73-
{ name: 'Data', route: 'https://dandi.emberarchive.org/', external: true },
74-
{ name: 'Documentation', route: '/documentation' },
75-
{ name: 'Getting Started', route: '/getting-started' },
76-
{ name: 'Tools', route: '/tools' },
77-
{ name: 'Metadata', route: '/metadata' },
78-
{ name: 'About', route: '/about' },
79-
];
143+
const tabs = ref<Tab[]>(defaultTabs);
80144
</script>
81145

82-
<style>
146+
<style lang="scss">
83147
.q-icon > img {
84148
width: auto;
85149
}
150+
151+
.q-tab__content {
152+
flex-direction: row;
153+
flex-wrap: nowrap;
154+
}
155+
156+
.bg-primary-opacity-15 {
157+
background-color: rgba($primary, 0.15);
158+
}
159+
160+
.q-list > .q-item {
161+
font-size: 0.9rem;
162+
}
86163
</style>

‎frontend/src/models/mainLayout.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
export interface Tab {
22
name: string;
33
route: string;
4-
external?: boolean;
4+
external: boolean;
5+
dropdown?: Dropdown;
6+
}
7+
8+
export interface Dropdown {
9+
show: boolean;
10+
children: Tab[];
511
}

‎frontend/src/pages/AboutPage.vue‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@
44
<div class="q-mx-xl">
55
<q-card flat class="q-mt-lg">
66
<q-card-section>
7-
<!-- <p>We are a team of research scientists and engineers who...</p> -->
8-
<!-- TODO -->
9-
107
<p>
118
In September 2024, our team at the
129
<LinkText :link="links.jhuapl" />
@@ -46,20 +43,19 @@
4643
uri="https://braininitiative.nih.gov/research/neuroimaging-technologies-across-scales/brain-initiative-connectivity-across-scales"
4744
/>
4845
). Our effort will further crucially leverage existing BRAIN resources for large neural
49-
data storage that have already been created and is widely used in the community: namely,
46+
data storage that have already been created and are widely used in the community:
47+
namely,
5048
<LinkText :link="links.dandi_full" />
51-
and
52-
<LinkText :link="links.dabi_full" />
53-
, which have been developed and maintained by members of our team. The infrastructure
54-
for storage is generously supported by the Amazon Web Services (AWS)
49+
, which has been developed and maintained by members of our team. The infrastructure for
50+
storage is generously supported by the Amazon Web Services (AWS)
5551
<LinkText :link="links.open_data" />
5652
program.
5753
</p>
5854

5955
<p>
60-
Integral to EMBER's success will be acceptance in the community (i.e., you) as the
61-
gold-standard engine for discovery. We will nurture bidirectional collaboration with the
62-
data generators, analysts, as well as the broader neuroscience research community to
56+
Integral to EMBER's success will be acceptance in the community as the gold-standard
57+
engine for discovery. We will nurture bidirectional collaboration with the data
58+
generators, analysts, as well as the broader neuroscience research community to
6359
introduce and maintain tools for sharing, querying, and analyzing data. EMBER will
6460
maximize the BBQS program's potential to reach its ambitious objectives of transforming
6561
our understanding of the link between brain and behavior.

0 commit comments

Comments
 (0)