Merge branch 'main' into bugfix-flag-annotations

TNO · Sep 28, 2023 · 4abc977 · 4abc977
2 parents dddc1a6 + a6a829c
commit 4abc977
Show file tree

Hide file tree

Showing 11 changed files with 714 additions and 374 deletions.
diff --git a/docs/developer-documentation/components/Minimap.md b/docs/developer-documentation/components/Minimap.md
@@ -1,59 +1,86 @@
-# Component name
+# Minimap View
 (Screenshot of component - Optional)
 
 ---
-(Short description)
+This component contains the colored map which visualizes the log contents according to the value in every cell.
 
 ## Relations to other components
 
-- **Parent:** ParentComponent
-- **Children:**
-	- Child1
-	- Child2
+- **Parent:** App
 
 ## Props
 
 | Name | Type | Description |
 | ---- | ---- | ----------- |
-| `prop1` | `type1` | short description |
-| `prop2` | `type2` | short description |
-| `prop3` | `type3` | short description |
+| `logFile` | `LogFile` | it contains the input content of the log |
+| `logViewState` | `LogViewState` | A state to keep several values for representing the log view |
+| `onLogViewStateChanged` | `function` | A function that update the log view state to other components |
+| `forwardRef` | `React.RefObject<HTMLDivElement>` | A ref object for update the scrolling between log view and minimap |
+| `rowProperties` | `RowProperty[]` | A interface to keep all the row related properties |
 
 ## State
 
 | Name | Type | Initial Value | Description |
 | ---- | ---- | ------------- | ----------- |
-| `stateObj1` | `type1` | `init value` | short description |
-| `stateObj2` | `type1` | `init value` | short description |
-| `stateObj3` | `type1` | `init value` | short description |
+| `state` | `LogViewState` | `undefined` | A state to keep several values for representing the log view  |
+| `scale` | `number` | `1` | the scale of the Mini map. If it is 1, then minimap 1: 1 matches the log view. If it is 0, minimap matches all the log view. |
+| `controlDown` | `boolean` | `false` | A state represents whether the ctrl button is pressed |
 
 ## Functions
 ### Component lifecycle functions
+
 - ### `constructor(...)`
 	- **Params:** 
 	    - `props: Props`
-	- **Description:**  Is invoked the first time the `StructureDialog` is opened. It constructs an array containing [StructureEntries](..\Types\StructureEntry.md) from the `logSelectedRows` props and updates the state accordingly.
+	- **Description:**  initializes the minimap canvas and the states; bind handlers for wheel and click actions; 
 	- **Returns:** -
+- ### `componentDidMount(...)`
+	- **Description:** add three events listener for window resize, the ctrl key down and up. 
 
-- ### `shouldComponentUpdate(...)`
+- ### `componentDidUpdate(...)`
 	- **Params:**
         - `nextProps: Readonly<Props>`
         - `nextState: Readonly<State>`
         - `nextContext: any`
-	- **Description:** This function returns a `boolean` value that indicates whether or not rendering should be skipped. It returns `true` if ..., and ... otherwise.
-	- **Returns:** `boolean`
+	- **Description:** check whether the logViewState, scale or the logFile is changed. If so, call the draw() function.
+	- **Returns:** -
 
 - ### `render()`
-	- **Description:**
-	- **Returns:** Div of type `JSX.Element` containing....
+	- **Description:** renders the minimap canvas
+	- **Returns:** div of type `JSX.Element`
 
 ### Functionality-related functions
-- ### `exampleFunctionWithNoParams()`
-	- **Description:** short description of what happens in the function.
+
+- ### `draw()`
+	- **Description:** draw the minimap and the grey block.
+	- **Returns:** -
+
+- ### `handleClick(...)`
+	- **Params:**
+        - `e: React.MouseEvent<HTMLElement>`
+	- **Description:** A function to handle the click action on a random point on the canvas, the log view will jump to that point.
+	- **Returns:** -
+
+- ### `handleWheel(...)`
+	- **Params:**
+        - `e: React.WheelEvent<HTMLCanvasElement>`
+	- **Description:** A function to handle scroll action on the canvas. Depends on whether "ctrl" is pressed, it will either scroll the minimap or Zoom In/Out.
+	- **Returns:** -
+
+- ### `updateState(...)`
+	- **Params:**
+        - `scale: number`
+	- **Description:** A function to update the log view state when the scale is changed by zooming in/out the minimap.
+	- **Returns:** -
+
+- ### `controlDownListener(...)`
+	- **Params:**
+        - `e: any`
+	- **Description:** A function triggered by key down event of "ctrl", it will set the state controlDown to true.
 	- **Returns:** -
 
-- ### `exampleFunctionWithParams(...)`
+- ### `controlUpListener(...)`
 	- **Params:**
-	    - `name: type`
-	- **Description:** short description of what happens in the function.
+        - `e: any`
+	- **Description:** A function triggered by key up event of "ctrl", it will set the state controlDown to false.
 	- **Returns:** -
diff --git a/docs/developer-documentation/dev-guidlines.md b/docs/developer-documentation/dev-guidlines.md
@@ -14,23 +14,27 @@ Below you can find several actions that should be taken while working on Tracy,
 - Make sure that the merged branch is deleted.
 
 ### Guidelines
+#### Best Practices
+- **Creating and updating branches:** Create branches from main and fetch/pull regularly. Doing this will prevent huge merge conflicts on your branch in the future.
+- **Format document:** Before you submit make sure to format the files you worked on. This makes sure your added code is formatted correctly. This also formats any code that was missed by previous contributors. Tracy utilises Prettier for code formating.
+- **React and Typescript versions:** Use the latest versions of React and TypeScript, and keep them updated regularly. This will ensure that you can use the newest features and capabilities of both technologies, such as React hooks and TypeScript generics.
+-  **Code style:** Use a consistent code style and follow the naming conventions described below. This will help you maintain a clean and readable codebase, and avoid common errors and bugs.
+- **Typescript practices:** 
+    - Use type aliases or interfaces to declare the types of your component props and state, and provide descriptive names and comments for them. This will help you document your components and make them easier to use and reuse.
+    - Use type inference whenever possible, and avoid using any type or casting types with as. This will help you leverage TypeScript's type system and avoid losing type information or introducing type errors.
+- **React practices:**
+    - Use functional components over class components where possible. This keeps the code up to date to the latest recommendation and best practises.
+    - Use Pure components when possible. This will help you write simpler and more concise components, and avoid unnecessary re-rendering and memory leaks.
+    - Use custom hooks to extract reusable logic from your components, and follow the naming convention of using the "use" prefix. This will help you organize your code and avoid duplication.
+
 #### Naming convention
+- Branch naming convention: In order to avoid confusion make sure you branch has a meaningful name that immediately informs the reader what the branch contains. In addition to this make sure to prefix your branch name with either of the following names: bug-fix/ or feature/ , followed by a meaningful name.
 - Use PascalCase for component names, type names, interface names, enum names, and type parameter names. For example: ComponentName, TypeName, InterfaceName, EnumName, T.
 - Use camelCase for variable names, function names, method names, property names, parameter names, and module alias names. For example: variableName, functionName, methodName, propertyName, parameterName, moduleAliasName.
-- Use UPPER_CASE for constant values, including enum values and global constants. For example: CONSTANT_VALUE, ENUM_VALUE.
+- Use UPPER_CASE for global constant values, including enum values and global constants. For example: CONSTANT_VALUE, ENUM_VALUE. Regular constans use camelCase.
 - Use descriptive and meaningful names for your identifiers, and avoid using abbreviations or acronyms that are not widely known or understood. For example: firstName, lastName, userProfile, not fn, ln, up.
 - Use consistent naming for component props types, such as <ComponentName>Props. For example: ButtonProps, ModalProps.
 
-#### Other
-- Use the latest versions of React and TypeScript, and keep them updated regularly. This will ensure that you can use the newest features and capabilities of both technologies, such as React hooks and TypeScript generics.
--  Use a consistent code style and formatting, and enforce it with tools such as ESLint, and EditorConfig??. This will help you maintain a clean and readable codebase, and avoid common errors and bugs.
--  Use TypeScript's strict mode and enable all the strict compiler options, such as noImplicitAny, noImplicitThis, strictNullChecks, and strictFunctionTypes. This will help you catch potential type errors and enforce type safety throughout your codebase. ?? - discuss with Bob
-- Use type aliases or interfaces to declare the types of your component props and state, and provide descriptive names and comments for them. This will help you document your components and make them easier to use and reuse.
-- Use type inference whenever possible, and avoid using any type or casting types with as. This will help you leverage TypeScript's type system and avoid losing type information or introducing type errors.
-- Use functional components instead of class components, and use React hooks instead of lifecycle methods. This will help you write simpler and more concise components, and avoid unnecessary re-rendering and memory leaks.
-- Use Pure components when possible. This will help you write simpler and more concise components, and avoid unnecessary re-rendering and memory leaks.
-- Use custom hooks to extract reusable logic from your components, and follow the naming convention of using the "use" prefix. This will help you organize your code and avoid duplication.
-
 ### References
 - [Typescript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/docs/basic/setup)
 - [Google Typescript Style Guide](https://google.github.io/styleguide/tsguide.html)

diff --git a/docs/developer-documentation/documentation/templates/Hook.md b/docs/developer-documentation/documentation/templates/Hook.md
@@ -0,0 +1,12 @@
+# useCustomHookName
+
+This file contains custom hooks which are used for ... in the ...
+
+
+## Dependencies
+- `constants`
+- `types`
+
+## Custom hooks
+- `customHookWithoutParams()`
+- `customHookWithParams(...)`
diff --git a/docs/developer-documentation/hooks/useStructureEntryManager.md b/docs/developer-documentation/hooks/useStructureEntryManager.md
@@ -0,0 +1,60 @@
+# useStructureEntryManager
+
+This file contains custom hooks which are used for the managment (i.e., addition/deletion/modification) of structure entries in the [StructureDialog](../components/StructureDialog.md).
+
+
+## Dependencies
+- `constants`
+- `types`
+
+## Custom hooks
+- `constructStructureEntriesArray(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `constructNewStructureEntry(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `appendNewStructureEntries(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `removeStructureEntryFromList(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `updateStructureEntriesAfterWildcardDeletion(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `toggleStructureLink(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `toggleCellSelection(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `removeLastStructureLink(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `addWildcardToStructureEntry(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `removeWildcardFromStructureEntry(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
diff --git a/docs/developer-documentation/hooks/useStructureRegularExpressionManager.md b/docs/developer-documentation/hooks/useStructureRegularExpressionManager.md
@@ -0,0 +1,51 @@
+# useStructureEntryManager
+
+This file contains custom hooks which contain all the Regular Expression logic related to the Structure Matching feature. The hooks in this file are used in the [`App`](../components/App.md) and [`StructureDialog`](../components/StructureDialog.md) React components.
+
+
+## Dependencies
+- `constants`
+- `types`
+- [`useWildcardManager`](useWildcardManager.md)
+
+## Custom hooks
+- `getRegExpExactWhiteSpace(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `escapeSpecialChars(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `getLineEndString(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `getCellValue(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `getRegExpForLogEntry(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `useStructureQueryConstructor(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `useJsonObjectToTextRangesMap(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `useStructureRegularExpressionSearch(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
diff --git a/docs/developer-documentation/hooks/useStyleManager.md b/docs/developer-documentation/hooks/useStyleManager.md
@@ -0,0 +1,90 @@
+# useStructureEntryManager
+
+This file contains custom hooks which are used for styling `JSX.Element`(s) used in different React components.
+
+
+## Dependencies
+- `constants`
+- `types`
+
+## Custom hooks
+- `getLogViewRowStyle(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `structureDialogBackdropStyle(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `structureDialogDialogStyle(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `wildcardStyle(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `getStructureTableHeaderStyle(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `getHeaderColumnStyle(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `getHeaderColumnInnerStyle(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `getStructureTableEntryIconStyle(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `getStructureTableRowStyle(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `getStructureTableLinkStyle(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `getStructureTableColumnStyle(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `getStructureTableCellSelectionStyle(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `getLogViewRowSelectionStyle(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `getLogViewStructureMatchStyle(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `getContextMenuStyle(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**
+- `getContextMenuItemStyle(...)`
+    - **Params:** 
+		- `props: Props`
+	- **Description:**
+	- **Returns:**