About The Canvas-Panel Architecture

The Canvas/Panel architecture is a component-based approach for constructing portals and user interfaces in healthcare services. It has certain limitations, such as restrictions on API usage and browser interactions.

Key takeaways:

• A Panel is a custom HTML element that serves as a reusable user interface component. It may interact with FHIR resources in a clinical context but it could be as simple as a paragraph of text. Panels are in general agnostic in the choice of framework (React, Vue etc) used to make them. Panels can read and write FHIR resources, interact with Canvas context, trigger custom events to be handled by the Canvas, and in the case of Modules, call custom APIs.

• Panels can only interact with a subset of APIs mandated by the system using canvas methods - other apis could be used within a panel but this is not part of the core architecture.

• We cannot know when creating the Panel where in the user interface it will be placed (or how many copies of the Panel may be present at once etc), or the pages/routes present in the system embedding the Panel. As a result Panels should not make use of the Browser’s url or History API (apart from where they are passed into the Panel via its attributes). Adding or reading data from the Browser window object should also be avoided, as should interactions with LocalStorage and SessionStorage.

• The Canvas component handles searching, rendering, authentication, context management, event handling, and error handling for Panels.

• Libraries serve panels to the user interface while registries contain information about multiple libraries used by the Canvas.

Getting Started

To get started with creating a panel, install the canvas-library in your project.

npm install @synanetics/canvas-library

Usage

TODO

Roadmap

• [x] Publish to @synanetics
• [x] Add README
• [ ] Convert to TypeScript

License

TODO

Contact

TODO

Useful resources

• Web Components
• @synanetics/panel-library