React Components

Overview

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 React components for specific uses in the user interface and to support app-level state management using Redux.

Hierarchy and Composition of React Components

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:

• <RootContainer>
  • <OffCanvasBody>
    • <BrowserRouter>
      • <App>
  • <OffCanvasMenu>
    • <CanvasMenu>

The <RootContainer> also imports the <App> component that is a child of the <BrowserRouter> component.

<App> and <Header> Components

The <App> component filters a route and maps an incoming route to these specific components:

• <HomePage>

  • <NewsPanel>
    • <NewsItem>
    • <LoginPanel>
  • <DescPanel>

• <Editor>

  • <ResourceTemplate>
    • <ResourceTemplateForm>
      • <PropertyPanel>
        • <InputLiteral>
        • <InputListLOC>
        • <InputLookupQA>
        • <PropertyResourceTemplate>
          • <PropertyTemplateOutline>
            • <InputLiteral>
            • <InputListLOC>
            • <InputLookupQA>
            • <PropertyTemplateOutline>

• <ImportResourceTemplate>

• <Login>

• <CanvasMenu>

• <FourOhFour>

The <App> component also contains the <Footer>.

<HomePage> Component

<NewsPanel> Component

The <NewsPanel> Component contains the <NewsItem>, <LoginPanel> , and <DescPanel> Components.

<NewsItem> Component

The <NewsItem> Component is updated manually by the product owner and a pull request is generated on the Sinopia Editor repository.

<LoginPanel> Component

<DescPanel> Component

The <DescPanel> Component contains a short description of the Sinopia project.

<Login>, <CanvasMenu>, and <FourOhFour> Components

The <Login> route displays a message and then redirects to a specific AWS Cognito instance login page.