# Project: Complete UI rewrite or radiology and toolkit as an open web application

**URL:** <https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503>\
**Category:** Toolkit\
**Tags:** radiology, toolkit, 350-hour-project, gsoc2022-project, gsoc2022\
**Created:** [May 20, 2022, 6:00pm UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503 "2022-05-20T18:00:02Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![rosekamallove](https://forums.librehealth.io/user_avatar/forums.librehealth.io/rosekamallove/32/1930_2.png) [@rosekamallove](https://forums.librehealth.io/u/rosekamallove)\
**Post date:** [June 23, 2022, 10:57am UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/24 "2022-06-23T10:57:08Z")

</div>

When I am installing the package from the GitLab URL using `yarn` it is throwing errors, so I have added the missing properties from the `package.json` file

Please add comments, so that I can update it, once ready it can be merged. _It is a blocker for me_ @sunbiz

> **[update: package.json (!138) · Merge requests · LibreHealth / LibreHealth...](https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents/-/merge_requests/138)**
>
> updated: name added: version added: repository: type and url

---

<div class="post-metadata">

**Author:** ![rosekamallove](https://forums.librehealth.io/user_avatar/forums.librehealth.io/rosekamallove/32/1930_2.png) [@rosekamallove](https://forums.librehealth.io/u/rosekamallove)\
**Post date:** [June 24, 2022, 7:34am UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/25 "2022-06-24T07:34:34Z")

</div>

The [HAPI FHIR R4](http://hapi.fhir.org/home?encoding=json&pretty=true) test server doesn’t have **radiology** , what test server should I use?

[OpenMRS](https://radiology.librehealth.io/lh-toolkit) has the following endpoints:

 ![Screenshot 2022-06-24 at 1.03.36 PM](https://forums.librehealth.io/uploads/default/original/2X/c/c7ebc99857211efad113a727eabba3dc4fb07a69.jpeg)

Please suggest another test server @sunbiz @judywawira

---

<div class="post-metadata">

**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\
**Post date:** [June 24, 2022, 11:00pm UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/26 "2022-06-24T23:00:06Z")

</div>

> [@Google Summer of Code 2022 Weekly Status Reports](https://forums.librehealth.io/t/google-summer-of-code-2022-weekly-status-reports/4510/9):
>
> **HAPI FHIR** ’s [test API](http://hapi.fhir.org/home?encoding=json&pretty=true) doesn’t support _Radiology_ and it is the next thing that is on my task list (following my GSoC proposal) If I don’t find an API that supports it this week I will move forward with other parts of the project. @sunbiz please do suggest some APIs that support Radiology [**forum post**](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/25)

/radiologyxx is an internal API that’s coming from the lh-radiology module. You can assume that will still be available and non-FHIR based. You will likely have to write your own webcomponents for these API Resources. For other things, the [FHIR ImagingStudy](http://www.hl7.org/fhir/imagingstudy.html) and its related FHIR resources is what you need to use.

---

<div class="post-metadata">

**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\
**Post date:** [June 24, 2022, 11:07pm UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/27 "2022-06-24T23:07:52Z")

</div>

I think this is better discussed here, rather in the MR:

> The root package is not meant to be used as a whole. Separate components should be used @lh-toolkit/ and imported individually. I don’t think this change to the main repo is necessary. @rosekamallove , Can you tell me why you want to import the entire monorepo and not only the webcomponents that you need?

---

<div class="post-metadata">

**Author:** ![rosekamallove](https://forums.librehealth.io/user_avatar/forums.librehealth.io/rosekamallove/32/1930_2.png) [@rosekamallove](https://forums.librehealth.io/u/rosekamallove)\
**Post date:** [June 25, 2022, 1:44am UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/28 "2022-06-25T01:44:18Z")

</div>

The only reason for me to use the whole package was so that I can have a direct import from `@lh-toolkit/package` by installing it in a single `npm i @lh-toolkit-webcomponents` and not needing to install say 30 different packages. Which will also make the dependencies in `package.json` harder to manage.

Installing a single package should be an opt-in, and we should at least be able to install all the packages as one.

---

<div class="post-metadata">

**Author:** ![rosekamallove](https://forums.librehealth.io/user_avatar/forums.librehealth.io/rosekamallove/32/1930_2.png) [@rosekamallove](https://forums.librehealth.io/u/rosekamallove)\
**Post date:** [June 25, 2022, 1:46am UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/29 "2022-06-25T01:46:51Z")

</div>

I think, I will _for now_ write for `ImagingStudy` as it is present in HAPI FHIR, and for /radiologyxx I can work on later. It changes the GSoC proposal flow but I think it makes sense to complete bulk of the project and then come to radiology

---

<div class="post-metadata">

**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\
**Post date:** [June 25, 2022, 1:50am UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/30 "2022-06-25T01:50:56Z")

</div>

But you will still have to import each component separately when using it on another component or web page, right? With the entire repo, you get demos, and a lot of non-essential files for distribution purposes.

---

<div class="post-metadata">

**Author:** ![rosekamallove](https://forums.librehealth.io/user_avatar/forums.librehealth.io/rosekamallove/32/1930_2.png) [@rosekamallove](https://forums.librehealth.io/u/rosekamallove)\
**Post date:** [June 25, 2022, 12:11pm UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/31 "2022-06-25T12:11:22Z")

</div>

If we publish it to NPM then we can ignore the non-package files in a `.npmignore` file, [article](https://remarkablemark.org/blog/2017/09/23/npm-publish-include-files/). But I think _, for now,_ installing packages separately is okay. I will install them separately.

---

<div class="post-metadata">

**Author:** ![rosekamallove](https://forums.librehealth.io/user_avatar/forums.librehealth.io/rosekamallove/32/1930_2.png) [@rosekamallove](https://forums.librehealth.io/u/rosekamallove)\
**Post date:** [June 25, 2022, 12:27pm UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/32 "2022-06-25T12:27:43Z")

</div>

[This MR](https://gitlab.com/librehealth/radiology/lh-radiology-owa/-/merge_requests/3) is for the UI Rewrite, and I will add the details tomorrow, but those details would be iterative and will update them regularly and by the end of the Re Write I will ad a Demo video.

Is there anything else that is required?

---

<div class="post-metadata">

**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\
**Post date:** [June 25, 2022, 8:46pm UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/33 "2022-06-25T20:46:43Z")

</div>

Yes, please create an issue and link the MR with that issue. If you have some designs for the UI, please add it to the issue.

---

<div class="post-metadata">

**Author:** ![rosekamallove](https://forums.librehealth.io/user_avatar/forums.librehealth.io/rosekamallove/32/1930_2.png) [@rosekamallove](https://forums.librehealth.io/u/rosekamallove)\
**Post date:** [June 28, 2022, 4:36pm UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/34 "2022-06-28T16:36:44Z")

</div>

This is just a thought, it would be really good if we could add **type declarations** for `lh-toolkit-webcomponents`

---

<div class="post-metadata">

**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\
**Post date:** [June 28, 2022, 8:05pm UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/35 "2022-06-28T20:05:15Z")

</div>

Would this mean that it would work only in TypeScript and supported frameworks, and not in JavaScript ones? Can you please explain the implications of this? I don’t fully comprehend, how this might be useful.

---

<div class="post-metadata">

**Author:** ![rosekamallove](https://forums.librehealth.io/user_avatar/forums.librehealth.io/rosekamallove/32/1930_2.png) [@rosekamallove](https://forums.librehealth.io/u/rosekamallove)\
**Post date:** [June 29, 2022, 6:02am UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/36 "2022-06-29T06:02:17Z")

</div>

It won’t affect the usage in a `.js` environment but will improve the developer experience in a `.ts` environment, for example when using `<fhir-patient-get url={url} />` We have the following properties that can be passed

```nohighlight
     return {
          url: { type: String },
          patientId: { type: String },
          patientName: { type: String },
          patientActive: { type: String },
          patientDecease: { type: String },
          patientBirthday: { type: String },
          patientGender: { type: String },
          patientMarriage: { type: String },
          patientContact: { type: String },
          patientAddress: { type: String },
          patientLanguage: { type: String },
          relationType: { type: String },
          value: { type: Object },
    };

```

In the usage, the developer would be able to see these parameters in their editor/ide through the tsserver IntelliSense, reducing bugs.

The developer using these in a .ts environment also won’t have to create a `declarations.d.ts` file and assign these to `any` instead they would be automatically seen as `JSX Element`

I think when we publish it to the npm registry, we should add **@types/lh-toolkit-webcomponents** , it is not necessary but will help the users of this library (in ts environments) a lot.

---

<div class="post-metadata">

**Author:** ![rosekamallove](https://forums.librehealth.io/user_avatar/forums.librehealth.io/rosekamallove/32/1930_2.png) [@rosekamallove](https://forums.librehealth.io/u/rosekamallove)\
**Post date:** [June 29, 2022, 6:27am UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/37 "2022-06-29T06:27:04Z")

</div>

@sunbiz Patient CRUD will be completed by the end of this week, is it possible to schedule a meeting later this week discussing the current state and the future of the project?

---

<div class="post-metadata">

**Author:** ![rosekamallove](https://forums.librehealth.io/user_avatar/forums.librehealth.io/rosekamallove/32/1930_2.png) [@rosekamallove](https://forums.librehealth.io/u/rosekamallove)\
**Post date:** [June 29, 2022, 2:56pm UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/38 "2022-06-29T14:56:51Z")

</div>

Patient Search → Demographics → Edit Patient is completed, please check it out and give feedback

P.S. I have finally integrated and am using lh-toolkit-webcomponents

@sunbiz @r0bby

[https://deploy-preview-2--lh-ui-rewrite.netlify.app/search-patient](https://deploy-preview-2--lh-ui-rewrite.netlify.app/search-patient)

---

<div class="post-metadata">

**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\
**Post date:** [June 30, 2022, 5:22pm UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/39 "2022-06-30T17:22:01Z")

</div>

Yes, we can meet over LibreHealth chat and discuss this. Longer discussions that require some kind of historical perspective will be good in the forums.

---

<div class="post-metadata">

**Author:** ![rosekamallove](https://forums.librehealth.io/user_avatar/forums.librehealth.io/rosekamallove/32/1930_2.png) [@rosekamallove](https://forums.librehealth.io/u/rosekamallove)\
**Post date:** [July 1, 2022, 10:09am UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/40 "2022-07-01T10:09:51Z")

</div>

Let’s meet 2022-07-02T17:30:00Z then if that lies within your availability

---

<div class="post-metadata">

**Author:** ![r0bby](https://forums.librehealth.io/user_avatar/forums.librehealth.io/r0bby/32/1781_2.png) [@r0bby](https://forums.librehealth.io/u/r0bby)\
**Post date:** [July 2, 2022, 6:14am UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/41 "2022-07-02T06:14:48Z")

</div>

@rosekamallove your weekly report is late.

---

<div class="post-metadata">

**Author:** ![rosekamallove](https://forums.librehealth.io/user_avatar/forums.librehealth.io/rosekamallove/32/1930_2.png) [@rosekamallove](https://forums.librehealth.io/u/rosekamallove)\
**Post date:** [July 2, 2022, 6:21am UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/42 "2022-07-02T06:21:12Z")

</div>

Sorry for that, won’t happen again.

---

<div class="post-metadata">

**Author:** ![rosekamallove](https://forums.librehealth.io/user_avatar/forums.librehealth.io/rosekamallove/32/1930_2.png) [@rosekamallove](https://forums.librehealth.io/u/rosekamallove)\
**Post date:** [July 11, 2022, 2:02pm UTC](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503/43 "2022-07-11T14:02:06Z")

</div>

@sunbiz Should I also separate the Patient CRUD Merge request into smaller bits, Patient Search, Patient Dashboard, Patient Update… say?

[Previous page](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503.md?page=1)

[Next page](https://forums.librehealth.io/t/project-complete-ui-rewrite-or-radiology-and-toolkit-as-an-open-web-application/4503.md?page=3)