Acceptance criteria

• Update README
• Add docstrings and comments where necessary

User story

As a user, I want an input form with codeocean api parameters, so I can submit a request to retrieve data.

Acceptance criteria

• When npm run start is executed, a react site with an input form with fields of codeocean's api parameters is visible.

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

• User should see all query parameters and should be able to select them
• Dropdowns for enums, input for ints

User story

As a visitor, I want to understand how results were generated.

Acceptance criteria

• See a list of all results assets
• For each result asset, see what capsule generated it
  • name
  • version
  • date and time of run
  • link to capsule
  • link to github (if available) <-- go ahead and fake this e.g. (https://github.com/allenneuraldynamics/<capsule_name>)
• For each result asset, see which raw data it was derived from
  • name
  • tags

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

• We used to call this the "pipeline run view."
• Only need to go back one "hop" in the provenance chain.

User story

As a developer, I want well-organized code, so I can maintain the code base.

Acceptance criteria

• The url endpoints should be moved to a config file.

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

Add any helpful notes here.

User story

As a user, I want to see AIND highlights on the main page, click on a certain highlight (card component), and navigate to the articles/publications/etc.

Acceptance criteria

• Clickable Material UI Card components that navigates to appropriate links
• Links to Protocols.io, AIND GitHub, OSF, DANDI, publications, Code Ocean

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Right now the data asset table is unstyled. Find a react table plugin (e.g. react-table), use it to render your table and apply one of the standard themes.

User story

As a user, I want to easily see which version is most up to date on GitHub, so I can update if necessary.

Acceptance criteria

• When a pull request is merged into main, then a tag matching the semantic version will be created.

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

Add any helpful notes here.

Describe the bug
When a user enters text in the search bar, this makes a request to Code Ocean with every keystroke. This causes a noticeable lag on the page. Change this so that a request is made when a user clicks "Enter".

To Reproduce
Steps to reproduce the behavior:

1. Go to Data Asset View
2. Type into the search bar at the top of the page
3. See lag on page

Screenshots

Is your feature request related to a problem? Please describe.
With the current features of the CodeOcean Capsule API, one cannot request all the capsule ids to display the metadata for all the capsules.

Describe the solution you'd like
When a user navigates to the Capsule View page, a user can input one capsule id in a field and the metadata for that capsule is displayed.

User story

As a user, I want to execute simple REST commands, so I can retrieve data from an external source.

Acceptance criteria

• When an input field is filled out and a button is pressed, then a REST command to an external server is executed.

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

For now, you can test by using issuing a GET request from:
https://raw.githubusercontent.com/AllenNeuralDynamics/data_schema/main/schemas/subject.json

and

https://raw.githubusercontent.com/AllenNeuralDynamics/data_schema/main/schemas/procedures.json

and then displaying the data as plain text on the react webpage.

User story

As a developer, I want to run unit tests, so I can have confidence any changes in the code won't break the expected functionality.

Acceptance criteria

• There are unit tests that can be run.

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

Add any helpful notes here.

User story

As a developer, I want a cleaner code base, so I can maintain it more easily.

Acceptance criteria

• There should only be three components to start, an App, an InputForm, and a component to render the fetched data.
• Unnecessary files should be removed (such as react's logo files)
• Doc strings should be added to components.

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

We should follow Google's javascript style guide: https://google.github.io/styleguide/jsguide.html

Describe the bug
The tags field should render the response as a list. Currently, all the tags get mushed together into one string.

To Reproduce
Steps to reproduce the behavior:

1. Run npm start
2. Click on 'submit'
3. Notice the data in the tags field gets mushed together

Expected behavior
The tags should be rendered in a better way. (Maybe a drop-down?)

Screenshots

Desktop (please complete the following information):

• OS: CentOs
• Browser Chrome/Firefox

Additional context
Add any other context about the problem here.

Is your feature request related to a problem? Please describe.
Currently the navigation menu for the website is located on the left hand side. It makes more sense from a user's perspective to have the navigation at the top of the site.

Describe the solution you'd like

• Navigation menu at the top of the screen with links to multiple pages
• The navigation menu is responsive and adjusts when the screen size changes

Add a page to the codeocean site that displays a table of capsules.

Acceptance Criteria

• all capsule metadata are represented as columns in the table
• capsules are fetched using the CodeOcean Capsule API
• use the same styles as the data asset table

User story

As a developer, I want to run a linter, so I can ensure my code is formatted correctly.

Acceptance criteria

• When an npm command is run, then a linter is executed that formats the code correctly.

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

Add any helpful notes here.

Describe the bug
The Prettier formatter and ESLint linter conflict with each other.

To Reproduce
Steps to reproduce the behavior:

1. Run npm run format-fix and npm run format
2. Run npm run lint-fix and npm run lint
3. Changes alternate back and forth between Prettier and ESLint

Expected behavior
Prettier and ESLint should agree

Additional context
Add any other context about the problem here.

User story

As a user, I want to pass my inputs into the fetch request, so I can fetch different requests.

Acceptance criteria

• When a user inputs data into the input form and hits submit, a fetch request with the user input will be sent to the back-end, and the corresponding json data will be rendered as a table.

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

Start with the following query parameters:

• from
• limit
• sort_order
• sort_field
• type

User story

As a user, I want to interact with CodeOcean's API, so I can see data that is being registered through there.

Acceptance criteria

• Query the CodeOcean Data Asset API and then put the data assets returned in an HTML <table> that displays all attributes of the assets.

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

• Data Asset API documentation: https://docs.codeocean.com/user-guide/code-ocean-api/data-asset-api
• Token authorization might be tricky
• Domain: https://codeocean.allenneuraldynamics.org/api/v1/data_assets/

User story

As a user, I want to be able to select results from the input form, so I can view results data assets stored in code-ocean.

Acceptance criteria

• When "results" is selected in the drop-down menu, then data assets tagged with results will be rendered.
• Columns displayed are those common to both types.

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

Add any helpful notes here.

Describe the bug
The column that displays the file size for each data asset should be converted to a unit that makes more sense to a user.
The file size value is (probably) bytes - convert this to GB.

To Reproduce
Steps to reproduce the behavior:

1. Click on dropdown menu and select 'Result'
2. Click on 'Submit'
3. Scroll to the right to the 'Size' column
4. See file size value

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Add any other context about the problem here.

User story

As a user, I want to see a header and navigation menu on the website, so I can have a better UX.

Acceptance criteria

• Add react-router-dom to project
• Add Header
• Add Navigation bar with page options

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

• Data Asset View Wireframe

User story

As a user, I want to view all data assets registered in Code Ocean

Acceptance criteria

• Can view the next 10 data assets when selecting the next page of the table

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

MUI DataGrid - Server Side pagination

Describe the bug
Currently, the routes in the app do not include a 'Home' page (Index.jsx).

Expected behavior

• I want to include a home page that is not called in App.jsx
• To do: need to research the best way to link MUI and react-router-dom

User story

As a developer, I want to run a simple hello world app, so I can build a more complicated website from that foundation.

Acceptance criteria

• When npm start command is run, then a basic hello-world website on localhost will be viewable.
• When npm test command is run, then a basic unit test will run.
• When someone checks the README file, a more detailed description of the project and installation instructions will be available.

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

Add any helpful notes here.

User story

As a user, I want to know what each input form button does, so I can more easily retrieve the data I want.

Acceptance criteria

• There should be a header describing the buttons in the input form.
• When a button is hovered over, a more detailed description is provided.

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

Add any helpful notes here.

User story

As a user, I want to know if there is trouble connecting to the CodeOcean server, so I can troubleshoot problems easier.

Acceptance criteria

• When the app has issues connecting to the CodeOcean proxy server, then a message is displayed to the user.

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

Add any helpful notes here.

Describe the bug
If the code isn't formatted correctly, then the github action should prevent the code from being merged.

To Reproduce
Steps to reproduce the behavior:

1. Push unformatted code and open a PR.
2. Notice that the github action still passes the checks.

Expected behavior
If the code isn't formatted correctly, then the github action shouldn't pass the checks.

Additional context
It's probably an easy fix. Change npm run lint-fix to npm run lint and change npm run format-fix to npm run format and check if there are any warnings.

User story

As a developer, I want to automatically run tests and linters, so I can be confident the code being merged is fine.

Acceptance criteria

• When a pull request is opened, then a github action will automatically run tests and style linters.

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

Add any helpful notes here.

User story

As a user, I want to throttle the requests sent to code ocean, so I can avoid issues with lagging.

Acceptance criteria

• Don't send request on every keystroke. Either send the request when the user hits enter, or add a timer.

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

Add any helpful notes here.

User story

As a user, I want to be able to track code versions, so I can update when necessary.

Acceptance criteria

• When a pull request is opened, then a GitHub action will check if the version is bumped.

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

• Check if the version in package.json was bumped
• Great if there are libraries that automatically bump the version

The user should be able to choose to show:

• data assets by themselves
• results by themselves
• both in the same table

User story

As a user, I want to query CodeOcean for data assets based on their tags.

Acceptance criteria

• A user can enter space-delimited words/tags into an input form element
• All entered tags are used to customize the query string
• Tag filtering is not done on the query results (i.e., do the filtering server side instead of client side if possible)

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

Add any helpful notes here.

User story

As a user, I want to see the website, so I can use it.

Acceptance criteria

• Script to deploy this service to app engine.
• Alternatively, deploy to a gcp compute instance.

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

Add any helpful notes here.

User story

As a user, I want to be able to navigate to different pages of the website.

• Home page
• Second page: Data Asset View
• Third page: Pipeline Run View

Acceptance criteria

• Navigation bar links to a separate page for Pipeline Run View

Sprint Ready Checklist

1. • Acceptance criteria defined
2. • Team understands acceptance criteria
3. • Team has defined solution / steps to satisfy acceptance criteria
4. • Acceptance criteria is verifiable / testable
5. • External / 3rd Party dependencies identified
6. • Ticket is prioritized and sized

Notes

Add any helpful notes here.