Skip to main content
Version: 2.3

3.1 General Architecture and Building Blocks

Explorer is a JavaScript Web-Application based on the React framework with Typescript for static typing, making the application robust and maintainable. Redux is used as global state management with Redux-Saga as middleware.

Explorer Architecture

React, Redux and Middleware​

This is a commonly used setup for medium to large React applications. For React mainly functional components are used and hooks are used to share stateful logic. Redux is applied for global state management. The redux store is used for saving the application state, caching network requests, saving configurations, graph settings and as a store for the graph data itself. Redux-Saga is a middleware that intercepts redux actions to execute asynchronous code such as network requests.

Cytoscape​

Cytoscape is an open source software platform for visualising complex networks and integrating these with any type of attribute data. Cytoscape-js is a fully featured graph library written in pure JavaScript, which is used in our application for rendering the graph.

Application Structure and Internal Modules​

The section should provide an overview of the folder structure and internal modules. This is not a complete model but rather focused on the more important parts of the application.

Explorer Structure Diagram
  • Assets
    • Fonts, icons and images.
  • API
    • API requests & data transformation.
  • Components
    • Common: Basic shared components that are reused all over the application.
    • Complex shared components like "Property filters" for example.
  • Constants
    • Global constant files ordered by feature.
  • Features
    • Components that are not shared and belong together are grouped as a feature in the corresponding folder. And example would be the Dashboard or Graph.
  • Hooks
    • Custom-hooks are used to share stateful logic. Most of the application logic can be found either in hooks or sagas.
  • Redux
    • Redux slices, actions and reducers.
    • Redux-Saga (middleware): Asynchronous functions that are performed when triggering a redux action, used to fetch data from the API for example.
  • i18n
    • All text strings are stored in a translation file.
  • Types
    • Typescript type definitions and enumerations.
  • Toolboxes
    • Toolboxes are singleton-classes that provide a range of feature-specific utility functions.
  • Utils
    • Small utility functions, logically grouped in files.