doc for log view

docs/developer-documentation/components/LogView.md

@@ -1,59 +1,143 @@
 # Component name
 (Screenshot of component - Optional)
 
+![](../../figures/Logview.PNG)
+
 ---
-(Short description)
+This component contains the table that shows the content of the log. Each row shows one log record and each column shows the value of the corresponding column.
 
 ## 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 content of the input log/logs |
+| `onLogViewStateChanged` | `function` | A function to update logview state to the parent component |
+| `onSelectedRowsChanged` | `function` | A function to pass the selected row to the parent component when it is changed |
+| `onRowPropsChanged` | `function` | A function to pass the property of the row when it is changed |
+| `forwardRef` | `React.RefObject<HTMLDivElement>` | `A ref object for update the scrolling between log view and minimap` |
+| `coloredTable` | `boolean` | `boolean for switching the colored table On/Off` |
+| `rowProperties` | `RowProperty[]` | `A interface to keep all the row related properties` |
+| `currentStructureMatch` | `number[]` | `The current selected structure` |
+| `structureMatches` | `number[][]` | `All the matched structures` |
+| `structureMatchesLogRows` | `number[]` | `The row number of all the matched structures` |
+| `collapsibleRows` | `{ [key: number]: Segment }` | `A map for the segment annotation, the key is the number of row where the segment starts, the value is the interface Segment contains the start row, end row and the nested level` |
+| `clearSegmentation` | `function` | `A function to delete all the segmentations` |
 
 ## 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 |
+| `columnWidth` | `{ [id: string]: number }` | `LOG_COLUMN_WIDTH_LOOKUP` | A map to keep the width of each column  |
+| `logFile` | `LogFile` | `this.props.logFile` | it contains the content of the input log/logs  |
+| `collapsed` | `{ [key: number]: boolean }` | `[]` | A map to keep tracking if the segmentation is collapsed |
 
 ## 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:**  bind the RefObject and the log view state; initialize the states;
 	- **Returns:** -
 
-- ### `shouldComponentUpdate(...)`
+- ### `componentDidMount(...)`
+	- **Description:** add event listener for window resize.
+
+- ### `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 log file or currentStructureMatch is changed. If so, call the updateState() function.
+	- **Returns:** -
 
-- ### `render()`
-	- **Description:**
-	- **Returns:** Div of type `JSX.Element` containing....
+- ### `renderColumn(...)`
+	- **Params:**
+        - `value: string`
+        - `columnIndex: number`
+        - `isHeader: boolean`
+		- `width: number`
+		- `colorMap: string`
+	- **Description:** This function returns the Div for a single column.
+	- **Returns:** Div of type `JSX.Element`
 
+- ### `renderRows()`
+	- **Description:** return the Div for all the visible rows and its segmentations.
+	- **Returns:** Div of type `JSX.Element` 
+
+- ### `renderSegmentForRow(...)`
+	- **Params:**
+        - `r: number`
+        - `level: number`
+	- **Description:** This function returns the Div for the segmentation of a single row.
+	- **Returns:** Div of type `JSX.Element`
+
+- ### `renderHeader(...)`
+	- **Params:**
+        - `width: number`
+	- **Description:** This function returns the Div for the header.
+	- **Returns:** Div of type `JSX.Element`
+
+- ### `renderHeaderColumn(...)`
+	- **Params:**
+        - `value: string`
+		- `columnIndex: number`
+		- `isHeader: boolean`
+		- `width: number`
+	- **Description:** This function returns the Div for each column in the header.
+	- **Returns:** Div of type `JSX.Element`
+
+- ### `render()`
+	- **Description:** This function renders the log view.
+	- **Returns:** Div of type `JSX.Element`
+
 ### Functionality-related functions
-- ### `exampleFunctionWithNoParams()`
-	- **Description:** short description of what happens in the function.
+
+- ### `collapseRows(...)`
+	- **Params:**
+        - `index: number`
+	- **Description:** This function updates the state `collapsed`
+	- **Returns:** A new map for `collapsed`
+
+- ### `updateState(...)`
+	- **Params:**
+        - `currentStructureMatchFirstRow: StructureMatchId`
+	- **Description:** This function updates the log view state
+	- **Returns:** -
+
+- ### `setColumnWidth(...)`
+	- **Params:**
+        - `name: string`
+		- `width: number`
+	- **Description:** This function updates the column width.
+	- **Returns:** -
+
+- ### `columnWidth(...)`
+	- **Params:**
+        - `name: string`
+	- **Description:** This function returns default width for column.
 	- **Returns:** -
 
-- ### `exampleFunctionWithParams(...)`
+- ### `isLight(...)`
 	- **Params:**
-	    - `name: type`
-	- **Description:** short description of what happens in the function.
+        - `color: string`
+	- **Description:** This function returns if the given color is light/dark.
+	- **Returns:** `boolean`
+
+- ### `getRGB(...)`
+	- **Params:**
+        - `level: number`
+	- **Description:** This function returns the corresponding color for the given level of Segmentation.
+	- **Returns:** RGB color
+
+- ### `getVisibleRows()`
+	- **Description:** This function returns the number of visiable rows.
+	- **Returns:** `number`
+
+- ### `deleteSegmentAnnotations()`
+	- **Description:** This function clears all the segmentations.
 	- **Returns:** -

docs/developer-documentation/components/Minimap.md

@@ -14,7 +14,7 @@ This component contains the colored map which visualizes the log contents accord
 
 | Name | Type | Description |
 | ---- | ---- | ----------- |
-| `logFile` | `LogFile` | it contains the input content of the log |
+| `logFile` | `LogFile` | it contains the content of the input log/logs |
 | `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 |