documentation for minimap component

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:** -