neurobagel / old-query-tool Goto Github PK

Clarify what the API_QUERY_URL env var does and mention that the content of the file should be changed based on whether you want the app to contact a local or remote api

Refer to this comment.

• Add field options to categoricalOptions in index.vue
• Implement the UI using CategoricalField.vue component
• Update updateCategoricalField in QueryForm.vue
• Update submitQuery function in QueryForm.vue
• Have a short line added to the README about what the UI element queries
• Update QueryForm.cy.js

The README should have information on how one can:

• Set up the application
• Launch the application
• Run tests

• Implement the UI element as a vue component
• Display the component in the QueryFrom.vue component
• Connect the element to an (asynchronous) API request
• Test the implementation with a component test
• Add a short line to the README about what the UI element queries (like an early draft of user docs)

Set up a workflow to run end to end tests on PRs and dispatch.

A user should be able to check out some basic instructions and screenshots to get a sense of:

• what can this thing do?
• how do I create and run a query?
• where should I direct my feedback / questions?

This could live in our docs https://www.neurobagel.org/documentation/ or in a README

We want to be as consistent with our tooling as we can. So far, there is only one other frontend tool, and that is built with Vue2 using Nuxt. We should have a quick chat on the choices for the implementation.

Decided:

• it'll be a vue app
• we'll use cypress for testing

To be decided:

• vue2 or vue3
• nuxt or plain vue?

If we go with vue3/Nuxt3, then I believe the only widely adopted and ready to go component library would be vuetify - and so far we have been using vue-bootstrap.

WDYT @rmanaem and @jarmoza

A test that uses all existing query fields and response checks out.

This tool will have to translate the selections a user makes on the UI into a (single) HTTP request that is sent to the bagelAPI, so that the bagelAPI can in turn make the corresponding SPARQL query to the graph and return the results to this tool. This tool then needs to be able to display the results it has received from bagelAPI in some way that is interesting to the user.

To implement the functionality for specs outlined here:

• Implement a check box to switch between the two .csv files
• Modify generateCSVString to return new subject-level results (the two .csv files).
• Update DownloadResultsButton component test
• Update README.md to mention what the tool now returns based on the status of the checkbox

As part of this, we need to make sure that we return the human-readable labels to the users, not the IRI for diagnosis levels and sex. See https://github.com/neurobagel/project/issues/47

For the moment, we will use the hard-coded mapping of controlled term IRI to human-readable label that already exists in the query tool

Brought up here

Is there an existing issue for this?

• I have searched the existing issues

New feature

As far as I can tell that field does nothing, hide it until there's a use?

Unclear documentation

No response

• Update the badge for component-test workflow
• Replace the npm badge with a badge for e2e-test workflow

To reproduce the bug:
Select a diagnosis other than All, check healthy control checkbox and you'll have a 422 error which is coming from the API validation, see here

The test should only check that the request goes out, not if there is a response.
The code snippet sending the request:
https://github.com/neurobagel/query-tool/blob/156902e5105db12f31032f314d05429f92abb004/components/QueryForm.vue#L178-L184

Adding some build-id to the UI to show which commit the live tool is currently running off of.

When a query with the value 0 for minimum number of session is submitted, the query tool throws a generic error. The error is generated by API see here.

Input fields in the query form need to be validated before the form is submitted.

Cases to keep in mind for validation:

• Age
  • minAge < maxAge
  • both minAge and maxAge must be non-negative
    currently, min property of the input element enforces this but this can't be tested inside the AgeField.cy.js test

Should the validations fail, the user shouldn't be able to submit the form, Perhaps the button becomes disabled and the field with the issue is highlighted and an informative message is given to the user.

Implementation

• Implement displayToast method to be called from inside the validateQueryForm
  • display an informative message using bootstapvue toast
• Implement validateQueryForm method
  • To be called when the submitQuery button Is clicked
  • Call displayToast method if there is an error otherwise call submitQuery method
• Update QueryForm.cy.js to test the above functionalities

Every time the workflow is run, the domain is reset back to GitHub pages default and to set it to a specific domain a CNAME file including the domain needs to be added to the build.

• Implement the UI using ContinuousField.vue component
• Update updateField method in QueryForm.vue
• Update submitQuery method in QueryForm.vue
• Have a short line added to the README about what the UI element queries
• Update QueryForm.cy.js

Set up and configure husky or some other package for running pre-commit checks

The UI should expose the same variables with UI elements (sliders, dropdowns, etc) that the API is exposing (see here).

• #14
• #15
• #16
• #17
• #18
• #19
• #20
  • e.g. whether a participant is a control subject or not (as implemented in the API)

Each of these should:

• Implement the UI element as a vue component
• Display the component in the QueryFrom.vue component
• Connect the element to an (asynchronous) API request
• Test the implementation with a component test
• have a short line added to the README about what the UI element queries (like an early draft of user docs)
  • e.g.: age: select the minimal and/or maximal age (in years) of a participant that should still be included in the results
• provide options for sex, diagnosis, imaging modality, assessment tools

• Add field options to categoricalOptions in index.vue
• Implement the UI using CategoricalField.vue component
• Update updateCategoricalField in QueryForm.vue
• Update submitQuery function in QueryForm.vue
• Update CategoricalField.cy.js
• Have a short line added to the README about what the UI element queries

Implement ContinuousField.vue to be used as a generic component for continuous fields similar to CategoricalField.vue
ContinuousField.vue will replace AgeFields.vue component and will be used to implement minimum number of sessions field (#19)

Update the generateCSVString function to reflect the changes made to the API in this PR.

• Implement using slots in CategoricalField.vue
• Implement slot for the diagnosis field in QueryForm.vue
• Integrate healthy control checkbox in QueryForm.vue
• Update submitQuery method in QueryForm.vue
• Update `QueryForm.cy.js
• Implement test for disabling diagnosis field when healthy control checkbox is checked in QueryForm.cy.js
• Refactor `CategoricalField.cy.js
• Implement test for displaying control slot in CategoricalField.cy.js
• Have a short line added to the README about what the UI element queries

Hi folks, the query tool is up and running https://query.neurobagel.org/.
We would like for you to give us feedback on the tool from the perspective
of a user, who would use it to search for sample-level cohorts of openneuro data.

In its current state the query tool:

• has access to some but not all open neuro datasets (~170 datasets)
• has up-to-date options for diagnosis, imaging modality, etc
• has two output tsv files available for download
  • dataset-level contains: dataset portal uri, dataset file path, dataset name, number of matching subjects, and available imaging modalities
  • participant level contains: dataset file path, subject id, age, sex, diagnosis, session id, session file path, number of sessions, and imaging modality
• doesn't have options for assessment

We'd love to get your feedback on:

• overall functionality
• content and format of the output tsv files
• UI experience
• anything else you notice or have thoughts on

Please add your feedback as comments on this issue or if it is very extensive, a GDoc/Hackpad could also work.

Set up a workflow to run eslint on PRs to catch any issues in case eslint wasn't run before committing.

The dataset name contains the \n escape character, it is parsed by JavaScript in code and interpreted as a new line when constructing the tsv file.

• Set up eslint using pre-existing style guide (airbnb/google)
• Add eslint plugin Vue to enforce Vue style guide

Update the options in CategoricalOptions in index.vue once the data has been added to graph.

Is there an existing issue for this?

• I have searched the existing issues

Expected Behavior

The dropdown options will look nice for all items, regardless of how long the option is

Current Behavior

Error message

No response

Environment

• OS:
• Python/Node version:

How to reproduce

Use iPhone SE in browser dev tools then toggle the dropdown for diagnosis

Anything else?

No response

Right now eslint doesn't understand the difference between the git staging area and the working directory. The consequence is that if I make a partial commit (i.e. I have more changes in my working dir than I include in the next commit), eslint will not limit itself to the files that are included in the commit.

We should install https://github.com/okonet/lint-staged and configure it so it can run as part of our husky pre-commit hooks so we get more informative eslint errors.

Set up a workflow for tests to run on dispatch and PRs

Given the implementation submitQuery function in QueryForm.vue component, how should server-side errors thrown by our API e.g., min_age > max_age be handled?

For this first release, we will hard-code the choices for categorical variables like diagnosis and imaging modality into the app. That is, in order to know what options a user should have in a UI element to select "diagnosis", we will rely on some internal, hardcoded variable. A good starting point could be to check what unique options are actually available in our graph (although that may change).

We need to code the options for:

• provide options for sex
• provide options for diagnosis
• provide options for imaging modality
• provide options for assessment tool

Once the OpenNeuro data is updated (https://github.com/neurobagel/project/issues/143) and the API is updated to adhere to the new model and data (neurobagel/api#129):

• update corresponding examples of the outputs in our internal wiki
• update dropdown options
• replace DatasetFilePath with DatasetID in output files
• update the generateTSVString method
• update README.md
• if possible, add some note (either directly in the column name or elsewhere) that the dataset uuid is just for merging the results TSVs and is not a persistent identifier (they're regenerated when the graph is remade)

• Provide options for sex
• Be hooked up to an (asynchronous) API request
• Have a short line added to the README about what the UI element queries (like an early draft of user docs)
• Component test

Set up cypress for testing

We want

• a static version of the app deployed publicly

• a https enabled neurobagel URL to reach the app at

• an automatic process that deploys the public app based on the most recent version of the main branch

• Enable static build process for deployment in nuxt.config.js

• Add dotenv nuxt module to buildmodules in nuxt.config.js

• Add API_QUERY_URL as an repository variable

• Set up deploy workflow following nuxt documentation

• Add neurobagel domain as the deployment domain

• Update README.md

• #8
• #9
• #11
• #12
• #22
• #13

• Generate project template via Nuxt
• Add BootstrapVue to the project

Create a sketch for the proposed design of the navbar of the query tool based on shortcuts mentioned in #103
See Bootstrap-vue as inspiration

See GitHub docs.

Given a query result list received from BagelAPI, we want a component that can display visually some basic information about each result dataset object.

• Default view before results are available that indicates how to run a query
• A view If no results are returned (i.e. list is empty)

When a non-empty query is returned display:

• A select all option
• Summary stats
• Download results button
• File download functionality

For each dataset in the response display a:

• Card
• Dataset title
• Number of subjects
• Modalities toolbar on cards

Test

• default view
• No result view
• Select all functionality: Whether it selects and unselects all checkboxes and updates download correctly
• A card displayed for each dataset returned
• Cards display the correct dataset title, number of subjects, and modalities
• Summary stats
• Download results button functionality sync with checkboxes
• update-download event is emitted

• Go through existing props
  • Set them to required if the component doesn't work without them
  • or provide a sensible default for them
• Change Cohort Definition Tool to Query Tool in index.vue
• Rename Modality to Imagin modality
• Rename updateCategoricalField method in CategoricalField.vue to updateField
• Add bagel favicon
• Update the modality colors
• Update README.md to follow the same pattern as the api
• Add loading animation while the result is being retrieved

Implement the following shortcuts in the tool for users to have easy access to

• #117
• Feedback shortcut to GitHub issues of the repo
• Website shortcut
• Repo shortcut
• Documentation shortcut

Currently setting the sex query field doesn't update the results. This is due to the recent update in the graph and needs to be addressed first in the API.

• Add field options to categorical-options.js
• Implement the UI using CategoricalField.vue component
• Update updateCategoricalField in QueryForm.vue
• Update submitQuery function in QueryForm.vue
• Have a short line added to the README about what the UI element queries
• Update QueryForm.cy.js