Code Monkey home page Code Monkey logo

hms-widget-sdk's Introduction

HMS Widget SDK

HMS Widget SDK

HMS Widget SDK is healthcare widget provider. We are a part of HMS Software Development Toolkit (HMS-SDK) will be a collection of tools that enable the efficient development of "add-on" applications. GLS will host workshops to provide training on the proper use of the HMS-SDK. The HMS-SDK fill facilitate writing both local add-on applications and enterprise applications.

Reference Architecture Diagram

Reference Architecture

Installation

We required dependencies below:

Usage

Step 1 : Create custom external Docker network

We declare default network name iassdk to communicate between service in Docker compose, you can create the network via command below:

$ docker network create iassdk

Step 2 : Start Docker compose with specific environment

Development environment

# Stop current/previous service in docker compose file "docker-compose.dev.yml"
$ docker-compose -f docker-compose.dev.yml down -v

# Start service in docker compose file "docker-compose.dev.yml"
$ docker-compose -f docker-compose.dev.yml up --build -d

Production environment

# Stop current/previous service in docker compose file "docker-compose.prod.yml"
$ docker-compose -f docker-compose.prod.yml down -v

# Start service in docker compose file "docker-compose.prod.yml"
$ docker-compose -f docker-compose.prod.yml up --build -d

Alternative step

Just run

# Development environment (calling "docker-compose.dev.yml")
$ sh run.sh dev

# Or 

# Production environment (calling "docker-compose.prod.yml")
$ sh run.sh prod

Note : You can check running log via command:

$ docker-compose -f docker-compose.dev.yml logs

Final step

Enjoy with sample widget!

note:port number 3000 is development environment

http://localhost:3000/patient

Detail

Please refer to our document.

License

MIT License

hms-widget-sdk's People

Contributors

hmsconnect avatar new-bmk avatar patharanorgls avatar poon-bmk avatar tinnarata avatar

Watchers

 avatar  avatar  avatar

hms-widget-sdk's Issues

[Structure] Structure Update

Updates on Project Specifications
From the previous report, the structure of the project has been updated, with the link attached below.
https://docs.google.com/document/d/1-Vy2uB27GiPXaQTR0Ya_-xjec0fG-9-pH3C9uSVIsVA/

Backend

  1. For clients to render correct data format (SFHIR/HMS Connect), we would like to confirm which approach should be used.
    a. Server explicitly inform client. e.g. special HTTP Header
    b. Client try to auto-detect the format. e.g. find some unique indicator
    Assumption: Client may try to specify required format, but in some situations, the server might not be able to honor the request.

Frontend

  1. For hms-data that have multiple sets, which set of data that we should use for search or display? Such as patient’s names for the SFHIR standard that have 2 sets, Official and Maiden. I suggest following the patient-browser for display hms-data.
  2. We will add Typescript for React.
  3. We have to add the folder structure.
    app/services → a service to fetch data from the server.
    app/hooks → sometimes we use a hook to implement a stateful function.
  4. Are we understand component structure correct?
    /base → as same as components in Material-UI library (Stateless)
    such as Button, Grid, Input
    /template → many bases combined (Stateless)
    such as Searchbar
    /widget → many templates combined (Stateful)
    such as PatientSearch

Modify authentication flow

The old one is mock login page. Now we plan to pack the web application and allow user to access our resource via HMS Widget SDK. So, we need to modify authentication flow.

Apply HMS Schema to HMS Widget SDK

The previous phase, we have already created SmartFHIR's schema. It works fine. Now we need to enhance the schema to support HMS schemas which are our main schema, including:

  • allergy
  • appointment
  • cc
  • diagnosis
  • encounter
  • laboratory
  • patient
  • pi
  • practitioner
  • procedure
  • radiology
  • triage
  • vitalsign

[POC] Widget gallery (including demo app)

Widget gallery

In the future, we plan to implement dashboard to render measurement/identification data on the widget via widget component. In each component can synchronize the data by using access token or any reference object to identify person who accessed to our system/dashboard instead of using personal ID(national ID, passport, ...) directly.

The widget should be flexible card or component that contains the information. It looks like this example :
https://strml.github.io/react-grid-layout/examples/0-showcase.html

The component can set style or layout via JSON data object. You can see the example below:
https://adaptivecards.io/designer

  • [option] Dashboard
  • Flexible component/widget
  • Reposition or Drag/Drop any widget/component : Medical record panel allows user to easily add other medical record widget and could be able to re-position. The constructor of Medical Record Panel can be include dimensions parameter for example 4X4 6X6 , 8X8
  • Set component style by using JSON data object
  • Dummy token to identify user instead of HN/NAT_ID/....
  • Demo app

Diastolic and Systolic in Vital-Sign can multiple fields?

ตอนนี้ลอง query โดยหา Diastolic and Systolic ผ่าน name ของ resource Vital-Sign โดยใช้ชื่อ BP
ผลปรากฏมี group ชื่อ ผลลัพธ์ดังนี้

  1. Diastolic BP และ Systolic BP
    และ
  2. Diastolic BP(PED) และ Systolic BP(PED)

คำถาม มีโอกาสที่จะได้ค่ามา 4 ค่าพร้อมกันไหม ซึ่งก็คือ Diastolic BP, Systolic BP, Diastolic BP(PED) และ Systolic BP(PED) หากมีโอกาส เราจะเลือกค่าคู่ไหนมาแสดงครับ

Practitioner & Participant employeeId mismatch

Describe the bug
employeeId ที่ได้จาก encounter คือ nodr เมื่อ query participant ด้วย Id ดังกล่าว ไม่สามารถหาเจอได้

How to know the token expiration date in `hmshealthapi`?

ใน hms-widget-sdk ตอนนี้ หาก login ผ่านการใช้ hmsheath api ไม่สามารถ รับรู้ได้ว่า token หมดอายุแล้วหรือยัง

คำถาม มีตัวแปรอะไรบ้างที่สามารถบอกวันหมดอายุของ token ได้ครับ?

[Patient] Patient Encounter (Frontend)

- [ ] The widget render encounter timeline as tree or table list

  • The widget could be able to handle on_click(event) to navigate to another medical records (medication, observation, result etc)

Demo app

To @poon-bmk , @new-bmk

In this Friday (2020-01-10), please help implement simple demo web app(or HTML) which shows content look likes wireframe below. We will tracking progress and across check your component based on 6-domain resource.
1.) Patient search
2.) Patient demographic
3.) Allergy
4.) Encounter
5.) Observation vital-sign
6.) Observation laboratory

Wireframe:
https://www.dropbox.com/s/6zgcqj1g310o165/IMG_2951.jpg?dl=0

Can add field code in vital-sign ?

ใน standard SFHIR จะมี code เพื่อบ่งบอกว่า ค่าที่จะใช้เป็นค่าอะไร ยกตัวอย่างใน config ของโปรแกรม

const OBSERVATION_CODE = {
  BLOOD_PRESSURE: { code: '55284-4', value: 'bloodPressure' },
  BODY_HEIGHT: { code: '8302-2', value: 'bodyHeight' },
  BODY_MASS_INDEX: { code: '39156-5', value: 'bodyMassIndex' },
  BODY_TEMPERATURE: { code: '8310-5', value: 'bodyTemperature' },
  BODY_WEIGHT: { code: '29463-7', value: 'bodyWeight' },
  HEART_RATE: { code: '8867-4', value: 'heartRate' },
  TABACO_SMOKING_STATUS: {code: '72166-2', value: 'tabacoSmokingStatue'}
}

แต่ใน hms health api เมื่อลองหาค่า Measurement ซึ่งจะต้องใช้ code ของ body weight, height ไม่สามารถใช้ code ดังกล่าวอ้างอิงได้เพราะไม่มี field code ใน api
https://hms-gateway-001.gitbook.io/openhealth-api/hms-standard/data-template-v.2/vital-signs
คำถาม สามารถเพิ่ม field code ไปได้ไหมครับ หรือมีวิธีอื่นใดบ้าง
ปล. หากใช้ค่านอกเหนือ code จำเป็นต้องปรับปรุง widget ให้ support ในรูปอื่นๆครับ

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.