Skip to content

Naming Convention for Visual Components

Greg Quinn edited this page Dec 1, 2017 · 20 revisions

For a current visualization of component breakdown on current mockups, see the design pdf maintained in the project repository.

So that we may be more precise in our descriptions of FluxNotes' many components, I propose the following ontology of visual components on a given FluxNotes Application in Patient mode:

  1. "Views" are collections of one or more "panels" organized and displayed to the user based on:
    1. The selected clinical event (e.g. pre-encounter, encounter, post-encounter, etc...)
    2. The user's role (e.g. surgical oncologist, nurse practitioner, etc...)
  2. "Panels" are collections of "subpanels" or "components" grouped together by functional and/or ontological similarities. Originally many of our "panels" contained only one "component", and our original implementation blurred the line between these.
  3. "Subpanels" are children of a parent "panel" that themselves are collections one or more "components" grouped together by functional and/or ontological similarities. For example, our context tray is an example of a "subpanel" that is contained within the EditorPanel, grouped together due to their functional similarity (i.e. our inserter buttons all interact with the editor the same way).
  4. "Components" are the smallest unit of functionality in our application. It should go without saying that "components" are react components, but so are all the other visual elements described above. A "component" is distinct in terms of the functionality and information it provides. For example, our Timeline is a "component" and our editor is a "component".

Additionally, the Targeted Data Subpanel is further divided into "Sections". These "Sections" are defined in SummaryMetaData. For example, the TargetedDataSubpanel has a Summary Section, a Timeline Section, and will in the future have Sections for labs, protocols, etc.... Each Section will have a "type" which defines the data it expects and therefore constrains the visualizations it can take on.

Furthermore, these Subsections within the TargetedDataSubpanel are implemented in the form of "components" called visualizers. Visualizers are named using: 'name''type'Visualizer where:

  • 'name' is a descriptive name of how the visualizer will show the data such as timeline, tabular, or narrative.
  • 'type' is the exact name of the type as specified in the metadata that this visualizer can display. Some example types are NameValuePairs, Events, and List.

Example visualizer names include:

  • TimelineEventsVisualizer
  • TabularNameValuePairsVisualizer
  • NarrativeNameValuePairsVisualizer
  • TabularListVisualizer

When creating a new component, ask yourself whether or not the component can be broken down into a view, panel, subpanels, and/or sections. This encapsulation will help our ability to modularize our components as the code-base matures and facilitate iteration on our design approach as time progresses.

Clone this wiki locally