repronim / reproschema-ui

UI to render ReproSchema based protocols and assessments.

reproschema-ui

This repository contains the code for the user-interface for the ReproSchema.

See it in action HERE

• reproschema-ui
  • List of supported input types
    • Text inputs
    • Numerical values
    • Audio inputs
    • Time and dates inputs
    • Multiple options inputs
    • Others
  • Viewing an certain protocol or activity with the app
  • Reference material
    • App architecture
  • Serve the app on your computer
    • Install the dependencies
    • Serve the app locally
    • Build for production with minification
    • Build for production and view the bundle analyzer report
    • Run unit tests
    • Run e2e tests
    • Run all tests

List of supported input types

The inputType is checked by src/components/InputSelector/InputSelector.vue which then calls the appropriate component.

Most of them are in the folder src/components/Inputs/

One exception is :

• sign: src/components/StudySign.StudySign.vue

Text inputs

• text: WebTextInput/TextInput.vue
• multitext: MultiTextInput/MultiTextInput.vue
• email: EmailInput/EmailInput.vue

Numerical values

• number: WebIntegerInput/IntegerInput.vue
• float: WebFloatInput/FloatInput.vue

Audio inputs

• audioCheck: AudioCheck/AudioCheck.vue
• audioRecord: WebAudioRecord/Audio.vue
• audioPassageRecord: WebAudioRecord/Audio.vue
• audioImageRecord: WebAudioRecord/Audio.vue
• audioRecordNumberTask: WebAudioRecord/Audio.vue
• audioAutoRecord: AudioCheckRecord/AudioCheckRecord.vue

Time and dates inputs

• date: YearInput/YearInput.vue
• year: YearInput/YearInput.vue
• timeRange: TimeRange/TimeRange.vue

Multiple options inputs

• radio: WebRadio/Radio.vue
• select: SelectInput/SelectInput.vue
• selectLanguage: SelectInput/SelectInput.vue
• selectCountry: SelectInput/SelectInput.vue
• selectState: SelectInput/SelectInput.vue

Others

• slider: SliderInput/SliderInput.vue
• documentUpload: DocumentUpload/DocumentUpload.vue
• save: SaveData/SaveData.vue
• static: Static/Static.vue
• StaticReadOnly: Static/Static.vue

Viewing an certain protocol or activity with the app

If you just want to view a protocol using the reproschema-ui you can pass the URL of the protocol schema to the url query parameter like this:

https://www.repronim.org/reproschema-ui/#/?url=url-to-your-protocol_schema

If you are hosting a schema on github, make sure that you are passing the URL of the raw content of the protocol schema. For example, our demo protocol can be accessed at this URL:

https://github.com/ReproNim/demo-protocol/blob/master/VoicePilot/VoicePilot_schema

But to get access to the raw content of that file you must click on the Raw button that will open this URL:

https://raw.githubusercontent.com/ReproNim/demo-protocol/master/VoicePilot/VoicePilot_schema.

Similarly, to view a single activity you can simply do this:

https://www.repronim.org/reproschema-ui/#/activities/0?url=url-to-activity-schema

When you want to make a standalone app for your study / protocol, you should modify the URL next to githubSrc in the file src/config.js to make it point to the URL of your schema. If you are using GitHub it should point to the raw Github pointer.

Also make sure that assetsPublicPath and backendServer are pointing the correct things.

module.exports = {
  /* eslint-disable */
  githubSrc: 'url-to-your-protocol_schema',
  banner: 'This service is a demonstration for the ReproNim project.',
  startButton: 'Join',
  assetsPublicPath: '/reproschema-ui/',
  backendServer: 'https://sig.mit.edu/vb/'
};

Reference material

This app use Vue.js, a javascript framework.

Working on this will most likely require you to have some knowledge of HTML, CSS and javascript.

For some free introductory material to javascript you can check the mozilla MDN or the W3 school.

For introductory material on Vue you can start by having a look at the guide. For a more detailed explanation on how things work, check out the guide and docs for vue-loader.

You can also find many non-free courses for all of the above on udemy or similar MOOC services.

App architecture

Serve the app on your computer

If you want help us improve the app and work on it on your computer, you will need to fork this repository and clone it on your machine.

If you don't have node or are not familiar with it, the easiest option is to use a Docker setup.

docker run -it --rm -p 8080:8080 -v $(pwd):/src --entrypoint bash \
    --platform linux/amd64 node:21.7.2-bookworm-slim

In the container terminal

cd /src
npm install
npm run serve

This serves the app with hot reload at localhost:8080: in other words you will be able to see the app run if you open a browser and go to this URL localhost:8080.

Build for production with minification

npm run build

Build for production and view the bundle analyzer report

npm run build --report

Run unit tests

npm run test:unit

Run e2e tests

npm run test:e2e

Run all tests

npm test

Lints and fixes files

npm run lint

reproschema-ui's Issues

parsing the prefix correctly

We are making a dangerous assumption here: https://github.com/ReproNim/schema-ui/blob/master/src/components/Survey/Survey.vue#L217

That the context prefix we are using maps directly to the name of the jsonld file. We need this because the prefix is how we are defining the scoring and branching logic. @satra when we do jsonld.expand on an activity, we lose the prefixes that we defined in @context -- do you know of a way to recover them?

implement redo on MultiPart

add audio playback button to restart from the beginning

i don't know how easy it would be to do both pause and play from here on out, or pause and play from the beginning. once recorded, could the soundcloud ui be used (if it's available as a widget)?

AudioCheck - Detect background noise - if high above certain threshold - Exclude

https://app.asana.com/0/774967722873529/1118923825279214/f

multitext widget

all parts of name (first, middle, last) in NDA items to be in a single widget

demo protocol: consent signing broken

after signing the consent it does not proceed.

redo mapping for calculations

#47

Sidebar names should be aligned

add different input types to readme

to make it easier for schema writers to know what inputtype to use, there should be a list provided by schema-ui and this should be consistent with the validator in reproschema.

Licence?

As I am working on the readme for this, by reinjecting some of my own doc notes and some of the content of other issues (#133 #4 #18) I realize that this does not have a license.

Should I add one in the [DOC] PR I am working on? Apache 2.0 like for the reproschema?

make response flow more intuitive on mobile (and other) devices

on mobile devices, it is rather unintuitive right now how to get started with responding. the flow should immediately lead people to go through each question and respond, including moving automatically from one section to the next.

voice task description

add instructions:

stop once you are done speaking. You may hit play to hear what was recorded.```

start/end time are not timestamps

the values for startedat and endedat are not timestamps.

Things required to make it production-ready

Render the title of the activity on the sidebar

Read the new schema from ReproNim/reproschema#55 and render the titles in the sidebar

Create inputType checkbox

So multiple choices can be selected

should we make the timeRange input more general?

@sanuann @satra

I was going through the checklist for the PET guidelines and the time range widget seems to have some hard coded aspects that won't be usable for the needs for that use case.

I suspect though this might require some changes on the schema side to allow more flexibility, no?

<template>
  <div class="TimeRangeInput container ml-3 pl-3">
    <b-row class="mt-2 mb-2">
      <b-col class="mt-2 mb-2">
        went to bed:
        {{yesterday}}
        <vue-timepicker v-model="slept" format="hh:mm A"></vue-timepicker>
      </b-col>
      <b-col class="mt-2 mb-2">
        woke up:
        {{today}}
        <vue-timepicker v-model="woke" format="hh:mm A"></vue-timepicker>
      </b-col>
    </b-row>

    <div class="mt-2 mb-2" v-if="timeSlept != null">
      <div class="mt-2 mb-2" v-if="timeSlept < 0">
        <b-alert show variant="danger">You can't sleep negative hours!</b-alert>
      </div>
      <b-button v-else @click="sendData">Submit {{timeSlept}} hours</b-button>
    </div>
  </div>
</template>

ensure app can pull in activity using a jsonld url

http://schema-ui.anisha.pizza/?url=https://raw.githubusercontent.com/ReproNim/schema-standardization/master/activity-sets/example/nda-phq.jsonld

add multi-part functionality

serving the schema-ui on github pages

Hello,

quick question from total noob: is it possible to serve this schema-ui repo using github pages?

trying to build a standalone proof of concept website so I figured this would the first easy solution.

Thanks

Remi

reproschema ui should be able to load protocols from schema.repronim.org/rl

currently the reproschema-ui (schema.repronim.org/ui/) does not load the demo voice protocol from schema.repronim.org/rl

also it should have a demo banner on any screen.

console logging as a debug option

console logging should be a debuggable option as either a url parameter or a config variable.

Add participant ID widget

should behave as follows:

1. initialize the widget with default UUID.
2. option to replace with personal UUID.
3. when url is called with particpant_id, the widget is initialized with the participant_id

visibility of widget:
if url is called with participant_id => do not show the widget
else => read only.

allow list to allow this widget to be readonly.

Google places autocomplete in place of birth widget

encode whether or not a question can be “skipped” or “don’t know”-ed

feature wishlist #1

• keep previous answers highlighted when new item is loaded
• hitting skip at any time, highlights the skip for that item and unselects any selected answer
• selecting an answer on a skipped question, removes skip highlight

for both of the last two cases the answer dictionary is updated to reflect current state.

• something that indicates progress perhaps a bar on top of the screen that stays as you scroll up and down.

audio re-record broken on safari

when a user re-records on safari, the audio record does not collect new data.

allow export at protocol level

implement UI

and start from https://github.com/sanuann/schema-standardization/blob/master/volumes/ReproNim/nda-phq9.jsonld

voice recording widget

• play button should turn to stop when playing and back to play when playing is done
• on android, playing appears to stop shorter than it should
• when you click redo recording, the time limit changes to 10000s from 10s

loading UI components

load from https://github.com/akeshavan/schema-standardization/blob/master/activities/PHQ-9/phq9_schema.jsonld#L67

add slider widget

schema-ui fixes:

1. select dropdown needs to be fixed in demographics.
2. fix the error in console (not sure why it occurs)
3. other questions assessment - branching between the items
4. branching in voice task feedback questions.

year of birth does not switch back to the right value

after filling year of birth, if you move to a different activity and return the value is not updated to reflect the entered value.

Export data (time stamped)

implement "requiredValue"

e.g. remove skip/don't know

• should be able to override skipping at different levels

Fix and enhance the mic test

When this happens:

Then this appears

But if you click on "show result" nothing happens, it just goes to the next activity.

Option A) we could run a signal-to-noise ratio test (SNR) on that audio sample to see if the environment is too noisy. Then we can give feedback: "Your environment is too noisy, please go somewhere quieter and try again".

So we'd need to run some code to run the SNR and depending on the score either proceed or give feedback, is that possible?

Option B) A simpler option is what you have now, and it's just playing the audio back to them and instructing "If you think there is too much background noise, please go somewhere quieter".

@satra , what do you think?

List of UI Components

Lets make a list here of the UI components we want to support and their label names.

• radio buttons inputType: 'radio'
• text input inputType: 'text'
• audio record inputType: 'audioRecord'
• integer input inputType: 'xsd:int'
• number input inputType: 'number' (this can be ints or floats)
• date picker inputType: 'date'
• checkboxes ??
• place input
• multitext input
• audioRecordNumberTask

@sanuann can you continue this list?

a few new bugs

1. in the results, two records are being created for each item (including two wav files for each audio item).
2. the attributed to field should generate a unique uuid for a participant (common across all items in a session).

should we expand and then compress the jsonld files?

reference: https://www.youtube.com/watch?v=Tm3fD89dqRE

audioRecordNumberTask widget

zip export

zip each blob in responses so that less data is sent

Track time taken to complete each assessment and each task/question (voice + surveys)

i think the latest updates to results should resolve this issue.

https://app.asana.com/0/774967722873529/1118923825279217/f

add a date widget

1. add a new folder here: https://github.com/ReproNim/schema-ui/tree/master/src/components/Inputs (called "date")

2. https://github.com/ReproNim/schema-ui/blob/master/src/components/InputSelector/InputSelector.vue#L43

maybe try this UI:
https://www.npmjs.com/package/vuejs-datepicker

set voice-pilot as default activity-set

app architecture

@sanuann

[UI] inputType for "arrays"?

@sanuann @satra

This might be cryptic way to describe this but for MRI and PET we are getting a lot items that require answer in terms of

X= ; Y= ; Z=

Very often for voxel dimension, image resolution...

It does not seem like a good idea to have 3 separate "float" items for this.

Did I miss it or is this something covered by the schema at the moment on the UI part in terms of possible inputType?

add multilingual support to schema components

this should allow any non-schema pieces to reflect language switches.

an example vue library: https://kazupon.github.io/vue-i18n/ would be good to do some search on this.

AudioCheck - Detect silence during voice task - if instructions are not followed - flag

https://app.asana.com/0/774967722873529/1118923825279215/f

fix the passage widget in multipart

its not showing the passage!