Skip to content

Web App Architecture

Jump to bottom
Sahar Mehrpour edited this page Aug 7, 2024 · 2 revisions

The current system architecture of ActiveDocumentation is illustrated below. In the diagram:

  • Components that can read data from the Redux state are marked with red dots.
  • Components that can update the Redux state by calling actions are marked with blue dots.
ActiveDocumentation_Architecture

Packages

In the src directory, there are five packages and several files in the original package.

Original Package

  • App.js: The main React component where all other components are included. WebSocket is also started here.
  • config.js: A configuration file to define features and enable/disable them in the tool. Currently two features are defined: MiningRules which is enabled, and ActiveLLM which is disabled.
  • index.js
  • registerServiceWorker.js

Monaco Editor Config

These files are created to configure the Monaco editor, which is used in RulePad.

  • configureMonaco.js
  • monaco-worker-loader-proxy.dev.js
  • monaco-worker-loader-proxy.js

Redux State Files

These files manage the Redux state.

  • actions.js
  • initialState.js
  • reducers.js
  • reduxStore.js
  • reduxStoreConstants.js

Style Files

  • App.css
  • index.css: All custom styles should be added to this file.

activeLLM Package

This package contains files responsible for developing the Active LLM feature. The contents of this package are not finalized yet.

core Package

  • generated-parser: Contains parser and tokenizer files generated by ANTLR 4 based on rulePadGrammar.g4, which is a grammar defined for RulePad.
  • coreConstants.js: Contains constants used in webSocketManager.js.
  • generateXPath.js: Generates XPath queries (for srcML v0.9.5) based on the parse tree generated by the parsers in generated-parser.
  • languageProcessing.js: Processes a given text and generates a parse tree based on the parsers in generated-parser.
  • ruleExecutor.js: Executes XPath queries of design rules against the srcML-based XML representation of code.
  • ruleExecutor.test.js: Contains tests for ruleExecutor.js.
  • ruleExecutorConstants.js: Contains constants used in properties of documented design decisions.
  • utilities.js: Contains utility functions and a function that sends data through a WebSocket connection.
  • webSocketManager.js: A React component responsible for receiving data from the WebSocket and updating the Redux state. Note that there should only be one webSocketManager component.

miningRulesCore Package

This package contains files for the Mining Design Rules feature.

ui Package

This package contains React components rendered in the UI.

  • activeLLM: Contains components related to the under-development feature, Active LLM.
  • MiningRules: Contains components related to the Mining Design Rules feature.
  • RulePad: Contains components related to the Authoring Design Decisions (RulePad) feature.
  • headerBar.js: The header component displaying the title of the open page or important messages.
  • navBar.js: Navigation bar component.
  • rulePanel.js: Displays an individual design decision in a panel.
  • ruleTable.js: Displays all design decisions by calling the rulePanel component.
  • tableOfContents.js: Component for the table of contents.
  • uiConstants.js: Contains constants used across the UI components.

web-socket-js Package

This package contains the files of the WebSocket library.

Clone this wiki locally