React Components
To support the generation of a dynamic user interface for catalogers to catalog resources, Sinopia uses a popular open-source Javascript library called React for generating user interfaces. The dynamic nature of the user interface comes about because the cataloger selects a resourceTemplate from the Sinopia Server that contains one or more propertyTemplates that defines the type, defaults, and constraints of the input user interface with the added complexity that a propertyTemplate can referencing other resourceTemplates. Besides creating editor specific React components, the Sinopia Editor codebase also uses a number of third-party modules that provide special React components for specific uses in the user interface and to support app-level state management using Redux.
Sinopia's Linked Data Editor has a hierarchy of components with <RootContainer> being the top-level React component. The RootContainer imports the <OffCanvas> that is composed of two children, the <OffCanvasMenu> and the <OffCanvasBody> components all from the react-offcampus module. This module provides the desired appearance and functionality for the Help and Resources portion of the user interface. The <RootContainer> also uses the react-router-dom module that provides a <BrowserRouter> React component that has three routes; homepage (default), editor, templates, login, menu, and 404 route for . These components are outlined in this image:
The <RootContainer> also imports the <App> component that is a child of the <BrowserRouter> component.
The <App> component filters a route and maps an incoming route to these specific components: