medblocks/medblocks-ui

Web Components Library for Medblocks Ecosystem

Medblocks

Your stack for building modern healthcare applications

Documentation

Usage:

Local Development

docker-compose up

Deployment

• Set DOMAIN_NAME environment variable to your full URL: https://domain.example.com
• Also set HTTPS to true
• Change the serve.tls.allow_termination_from in the hydra/hydra.yml file to the IP address range of the reverse proxy/load balancer according to CIDR Notation
• Change the insecure example value to secure randomly generated values in all configuration files - including passwords in init.sql.

medblocks-ui's Issues

Submit Button not working once substance is added and deleted in allergy form

Maybe because of the addition of another substance, its index got created, however, the mandatory field is not filled.

[Question] Modify CSS in Shoelace

Hi @sidharthramesh

I want to style inside the <sl-input> but there is a <mb-input> parent.
Is there a way to access the Shadow DOM in sl-input?
Thank you.

Element to handle multiple coded text along with original input

With NLP solutions on the rise, there should be a way to write a descriptive summary of something and be able to receive prompts as Coded Text for the same DV_TEXT element.

While prompting is already possible using the mb-suggest API, we still need an element like mb-input to accept multiple inputs (coded text) along with the main text input.

The UI will probably look like mb-input-multiple, but have a main text sections and multiple other elements coded text elements in the bottom.

Test Composition as webcomponent

mb-context not submitted from mb-form

Hello,

I followed @sidharthramesh tutorial from youtube. I have a problem from setting an mb-context
Here is my mb-form :

<mb-fhir-form class="flex flex-col gap-3" on:mb-submit={handleSubmit}> <mb-context path="resourceType" data="Patient"></mb-context> <mb-input path="name[0].given[0]" label="Name"></mb-input> <mb-date path="birthDate" label="Date of Birth"></mb-date> <mb-buttons type=code path="gender" label="Gender"> <mb-option value="male" label="Male"/> <mb-option value="female" label="Female"/> <mb-option value="other" label="Other"/> </mb-buttons> <mb-submit> <sl-button {loading} type="info">Submit</sl-button> </mb-submit> </mb-fhir-form>

The context is set when i look up on the mb-element list before submitting.
But in the handleSubmit method, the context of the resourceType doesn't appeared
Have you the same behaviour ?

Thanks for this tutorial, it's very great
Have a nice day
Thomas

Is there any option to customize the validation message for input fields?

We can pass the required flag to the input field and it is showing the default browser html validation message. Is there any option to get the errors in the submit event so that we can show the error messages based on our styles?

Ability to Import via CDN

The current build uses imports without the file extension

import component from './file'

This does not work on a CDN and needs transformer/bundler like Vite to transform it like so:

import component from './file.js'

Either need to figure out a way to use es-build to do the transformation, or have to manually change all './file' to './file.js'.

Performance issue when destroying components

There are multiple onDestroy events happening during tear down, and most of them are unnecessary since the whole component is going to be destroyed anyway. Once the onDestroy signal is received, setting a flag to not do anything on the child components and execute clean up on the composition can speed up things significantly.

Save and Restore UX can be interpreted differently

I just finished your introduction/tutorial blog post and Medblocks UI is looking really cool! Thanks for making it open source.

Everything worked as expected on my side, but I stumbled over one little UX thing:
On Settings -> Customize page the buttons Save and Restore default appear to be in the context of each element's scope. For instance, if I click on the DV_CODED_TEXT element like in the tutorial all the customization options on the right are changing and moving depending on the type - but so do the Save and Restore default buttons as well. For me this suggests all changes need to/can be saved or restored individually.

I'm just a backend dev but to illustrate my thoughts here you can see two options where I would have expected a 'global' save and restore button:

Template not being added.

I tried uploading my own template and the one provided in the "Introducing Medblocks UI" and it did not up load.
Nothing happens and there is no error thrown.

Thank you for your work.

Ability to search local <mb-options> in <mb-search>

Automated Customize UI generation from JSdocs

The Jsdocs annotation in the components can be used to automatically generate a placeholder UI for different rmTypes, group etc

mb-date should be able to handle input in format [number] [units] ago

This is useful for recording active conditions, and diagnoses in the patient's past.

Example mockups:
[ number input ] years ago
[ number input ] months ago
[ number input ] days ago

This should actively be converted back and forth to actual date time formats.

Access terminology URL from global config

Tabbed interface for groups

Display the group titles as tabs and allow switching between them

Checkbox option for CodedText

Have checkbox option for Coded Text element. If multiple choices are present, only one option can be selected. Can also be a radio button.

Context elements not getting populated , if multiple contexts are there.

Medblocks UI components :

Composition samples :

{
"aarthy.clinicalnotes.v1/diagnosis_of_right_eye:0/problem_diagnosis_name":"xxxxx",
"aarthy.clinicalnotes.v1/diagnosis_of_right_eye:0/language|code":"en",
"aarthy.clinicalnotes.v1/diagnosis_of_right_eye:0/language|terminology":"ISO_639-1"
"aarthy.clinicalnotes.v1/diagnosis_of_right_eye:0/encoding|code":"IN",
"aarthy.clinicalnotes.v1/diagnosis_of_right_eye:0/encoding|terminology":"ISO_3166-1"
}

when there is only single input, the context elements are getting populated. But when there are multiple inputs,

{
"aarthy.clinicalnotes.v1/diagnosis_of_right_eye:0/problem_diagnosis_name":"xxxxx",
"aarthy.clinicalnotes.v1/diagnosis_of_right_eye:1/problem_diagnosis_name":"yyyyy",
"aarthy.clinicalnotes.v1/diagnosis_of_right_eye:0/language|code":"en",
"aarthy.clinicalnotes.v1/diagnosis_of_right_eye:0/language|terminology":"ISO_639-1"
"aarthy.clinicalnotes.v1/diagnosis_of_right_eye:0/encoding|code":"IN",
"aarthy.clinicalnotes.v1/diagnosis_of_right_eye:0/encoding|terminology":"ISO_3166-1"
}

missing context elements :

"aarthy.clinicalnotes.v1/diagnosis_of_right_eye:1/language|code":"en",
"aarthy.clinicalnotes.v1/diagnosis_of_right_eye:1/language|terminology":"ISO_639-1"
"aarthy.clinicalnotes.v1/diagnosis_of_right_eye:1/encoding|code":"IN",
"aarthy.clinicalnotes.v1/diagnosis_of_right_eye:1/encoding|terminology":"ISO_3166-1"

Infinite loop when trying to add repeatable?

In the initial assessment template. Get rid of state in the Group element.

AQL Path for Repeatable - Group and DV_CODED_TEXT etc same

Maybe have a different configuration path than AQL?
Currently, all the configuration is passed to both the group and DV element components. This causes weird bugs. For eg: When displayTitle is set to false for the Group, the same gets set for the DV element too.

Issue with yarn

I used the latest vite and svelte project to use the medblocks ui library
The below is my package.json

  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-check --tsconfig ./tsconfig.json"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^2.0.0",
    "@tsconfig/svelte": "^3.0.0",
    "svelte": "^3.54.0",
    "svelte-check": "^2.10.0",
    "tslib": "^2.4.1",
    "typescript": "^4.9.3",
    "vite": "^4.0.0"
  },
  "dependencies": {
    "medblocks-ui": "^0.0.162"
  }
}

As per the docs, the below was added to the App.svelte.

<script lang="ts">
    import 'medblocks-ui'
    import 'medblocks-ui/dist/shoelace'
</script>

On importing a template related to blood pressure, it does not render correctly. The screenshot of the same is attached below. The issue seems to be with components like mb-quantity and mb-select.

<mb-form class="flex flex-col gap-3 p-5 shadow-lg rounded-lg border">
    <mb-context path="petetest/category" />
    <mb-context path="petetest/context/start_time" />
    <mb-context path="petetest/context/setting" />
    <mb-quantity
        default="mm[Hg]"
        path="petetest/blood_pressure/any_event:0/systolic"
        label="Systolic"
    >
        <mb-unit unit="mm[Hg]" label="mm[Hg]" />
    </mb-quantity>
    <mb-quantity
        default="mm[Hg]"
        path="petetest/blood_pressure/any_event:0/diastolic"
        label="Diastolic"
    >
        <mb-unit unit="mm[Hg]" label="mm[Hg]" />
    </mb-quantity>
    <mb-context path="petetest/blood_pressure/any_event:0/time" />

    <mb-context path="petetest/blood_pressure/subject" />
    <mb-context path="petetest/blood_pressure/language" />
    <mb-context path="petetest/blood_pressure/encoding" />
    <mb-context path="petetest/composer" />
    <mb-context path="petetest/language" />
    <mb-context path="petetest/territory" />
    
    <mb-submit>
        <sl-button type="neutral">Submit</sl-button>
    </mb-submit>
</mb-form>

@sidharthramesh I would appreciate your support here.

Tests for Search Component

Missing RM-Mappings support

Hello,

Currently the library does not support some RM types such as DV_IDENTIFIER, DV_URI, SECTION, ... I don't know if I'll face more clashes but I'm wondering if the library is being maintained / up-to-date with latest changes in data types found in EHR templates & archetypes?

Another thing I want to point out is multi-lingual support. Templates can be exported in multiple language types, currently I think the library only defaults to EN (at least from the VSCode extension side of things).

Thanks in advance

Elements should be undefined if the value is incomplete

Eg:

• dv-quantity should output undefined if the magnitude is not present.
• dv-proportion should output undefined if the numerator is not present.

Make Standardized Tests for all components

These tests are for the Leaf component and not the inner component.
The following must be tested:

• it must render essential visual elements
• it must change store on input change
• it must change event output on input change
• it must remove all related paths on destroying the component

Other tests can be added as seen fit.

Add documentation for mb-search-multiple

The documentation for the mb-search-multiple is missing in the docs folder.

DateTime - input with datetime-locale does not work on Firefox

Add tests for MultiSelectCodedArray Component

Make Composition component work with Angular as a web component

repeatprefx and repeatsuffix

On a recent project, I created two datapoints with path :

• abc.v0/problem_diagnosis:0/problem_diagnosis

• abc.v0/problem_diagnosis_as_per_intimation:0/problem_diagnosis

This is the peice of code i used

    <mb-form>
         <mb-search-multiple
            path="abc.v0/problem_diagnosis_as_per_intimation:0/problem_diagnosis"
            repeatprefix="abc.v0/problem_diagnosis_as_per_intimation"
            repeatsuffix="problem_diagnosis"
            placeholder="Search for Diagnosis"
         >
          <mb-filter
            value="<64572001 | Disease (disorder) | OR <272379006 | Event (event) |"
            label="Diagnosis"
          />
        </mb-search-multiple>

        <mb-search-multiple
            path="abc.v0/problem_diagnosis:0/problem_diagnosis"
            repeatprefix="abc.v0/problem_diagnosis"
            repeatsuffix="problem_diagnosis"
            placeholder="Search for Diagnosis"
         >
          <mb-filter
            value="<64572001 | Disease (disorder) | OR <272379006 | Event (event) |"
            label="Diagnosis"
          />
        </mb-search-multiple>
     </mb-form>

On setting the form with the object given below, I found out that both the fields getting populated.

{
    "abc.v0/problem_diagnosis_as_per_intimation:0/problem_diagnosis|code": "195967001",
    "abc.v0/problem_diagnosis_as_per_intimation:0/problem_diagnosis|terminology": "SNOMED-CT",
    "abc.v0/problem_diagnosis_as_per_intimation:0/problem_diagnosis|value": "Asthma",
}

Is this expected behaviour?

Checkbox to start in indetermined state

mb-checkbox must output undefined unless checked and unchecked manually

Make bulma work inside webcomponent or move to a different library

Validate Templates and Configuration before accepting it

The Templates and configurations are not being validated currently. This can lead to corruption of the application at start up if an improper file passes the JSON validation check and gets stored in local storage/Index DB.

issue with @sholace package in google chrome (v114.0.5735.133)

Hi.
I have a problem with @shoelace-style/shoelace package when opening my web app in Google Chrome:

reposition() {
            this.open && this.popover.update()  ----> this one
        }
        async handleOpenChange() {
            if (!this.disabled)
                if (this.updateAccessibleTrigger(),
                this.open) {
                    Ybe(this, "sl-show"),
                    this.panel.addEventListener("sl-activate", this.handleMenuItemActivate),
                    this.panel.addEventListener("sl-select", this.handlePanelSelect),
                    document.addEventListener("keydown", this.handleDocumentKeyDown),
                    document.addEventListener("mousedown", this.handleDocumentMouseDown),
                    await Obe(this),
                    this.popover.update(),  ----> this one
                    this.panel.hidden = !1;
                    const {keyframes: e, options: t} = Kbe(this, "dropdown.show");

It only happens in Google Chrome version 114.0.5735.133.
Tried to forcefully increase the version to ^2.4.0, but the problem persists.

Any solution for this issue?

Thanks,
Ardi

Automated CI/CD to Netlify

Tests for DV_CODED_TEXT

The following codesystem should be tested for the Dropdown:

• Local
• Local with Default set
• External coded
• External coded with default set
• External coded with Value set
• External coded with Value set and default set.

New Substance index not gets deleted but is replaceable.

Adding another substance to the allergy form creates another index, which needs to be deleted inorder for the proper working. But its ok, when it gets replaced.

MultiSelectCodeArray should work with other repeatable element as parent

The multiselect code array element currently renders a wrong path when using with a repeatable parent with a single occurrence DV_CODED_TEXT