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:

The <OffCanvasBody> contains another React component from the react-router-dom third-party module that allows for the easy generation of a single-page application <BrowserRouter> React component that matches specific URL patterns into multiple routes for base route / to the homepage, the /editor route to editor forms, a /templates route that displays a list of available templates and to upload a new resource template. Other supporting routes include the /login to allow the user to authenticate using AWS Cogntio, The /menu for the off-canvas help and resources page, and a 404 route for unmatched routes entered by the user.

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

On the Sinopia's homepage, the top level React Components are outlined in the following image when the Help and Resources is clicked and the <OffCanvasMenu /> is displayed:

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.