initial SideBySide commit

.eslintrc.cjs

@@ -0,0 +1,21 @@
+/* eslint-env node */
+module.exports = {
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', "plugin:react/recommended"],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', "react"],
+  root: true,
+  rules: {
+    "no-useless-escape": "off",
+    "no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        "selector": "variable",
+        "format": ["camelCase","PascalCase","UPPER_CASE"]
+      }
+    ],
+    'react/jsx-uses-react': "error",
+    'react/jsx-uses-vars': "error",
+  }
+};

.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+out/
+workspace/
+*.vsix
+examples/*.tracy.json
+!log/

.prettierignore

@@ -0,0 +1,13 @@
+node_modules/
+out/
+workspace/
+media/
+examples/
+.eslintrc.cjs
+.github/
+.vscode/
+*.vsix
+README.md
+webpack.config.ts
+tsconfig.json
+src/extension

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+	"tabWidth": 2,
+	"useTabs": true,
+	"printWidth": 100
+}

.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Run Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"runtimeExecutable": "${execPath}",
+			"args": ["--extensionDevelopmentPath=${workspaceRoot}"],
+			"outFiles": ["${workspaceFolder}/out/**/*.js"],
+			"preLaunchTask": "npm: compile"
+		}
+	]
+}

.vscodeignore

@@ -0,0 +1,9 @@
+.vscode/
+src/
+.gitignore
+tsconfig.json
+webpack.config.ts
+workspace/
+*.vsix
+.github/
+examples/

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-2023 TNO
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,70 @@
+# Tracy
+Tracy is a Visual Studio Code extension for the analysis of logs. It is meant as a research platform to experiment with novel concepts.
+
+<div align="center">
+    <a href="https://github.com/TNO/vscode-tracy">
+        <img height="500" src=".github/screenshot.png">
+    </a>
+</div>
+
+## Installation
+To install Tracy in Visual Studio Code: test
+1. Obtain the plugin `.vsix` file:
+    - If you want to install the latest release, go to the [Latest release](https://github.com/TNO/vscode-tracy/releases/latest) and download the `vscode-tracy-X.X.X.vsix` file under *Assests*.
+    - If you want to install a specific commit, click on the :heavy_check_mark: next to the commit -> *Details* -> *Summary* -> under *Artifacts*, *vscode-vsix* and extract the downloaded `vscode-vsix.zip`.
+1. Open Visual Studio Code, in the side bar go to *Extensions* -> `···` (right top) -> *Install from VSIX...* -> open the downloaded `vscode-tracy-X.X.X.vsix`.
+1. Tracy is now installed and will be used as the default viewer for all `*.tracy.json` files. You can download an `example.tracy.json` from [here](https://github.com/TNO/vscode-tracy/raw/main/examples/dummy.tracy.json.zip) (extract before opening).
+1. If you want to upgrade Tracy in the future, repeat the instructions above.
+
+## User Guide
+
+### Input File Format Guidelines
+
+Tracy is designed to process log files represented in JSON format. The input log file must adhere to specific criteria outlined below to ensure optimal utilization of Tracy's capabilities.
+
+1. **File Format:**
+   - The input log file must be formatted in JSON. Specifically, it should be structured as a list of JSON objects, where each object represents a distinct event.
+   - All events within the log file must possess identical fields, rendering the log as a tabular structure with rows representing events and columns representing event fields.
+   - It is recommended that the input file contains only UTF-8 encoded characters. Non-UTF characters may lead to unexpected behavior or errors during processing by Tracy.
+
+2. **Automated File Recognition:**
+   - Files with the extension `*.tracy.json` will be automatically recognized and opened by Tracy without any additional configuration.
+
+3. **Transformation for Non-JSON Files:**
+   - If the input log file is not in JSON format, users are required to transform it before using Tracy.
+   - To facilitate this transformation, an open source converter has been developed. This converter can be accessed [here](https://github.com/TNO/vscode-tracy-csv-converter), and it streamlines the process of converting non-JSON log files into the required JSON format.
+
+4. **Column Configuration:**
+   - If the input log file contains a column that indicates the timestamp of each event, then it should be explicitly named "Timestamp". Furthermore, for ease of use we suggest that such a column corresponds to the first column of each event.
+   - Users are advised against including two specific column names, namely "Line" and "Structure," as these columns are utilized internally by Tracy.
+
+### The minimap
+
+A prominent feature is the minimap, which allows navigation and analysis of a log by representing information in the form of glyphs (colored rectangles). In the minimap, each column of the log is represented as a column of glyphs. Every value in the log column maps to a glyph, in such a way that different values map to different colors. For timestamp values, nearby timestamps map to nearby colors, so that a gradual progress of time shows as a smooth gradient in the first minimap column.
+
+The minimap can be scaled (zoomed out and in) by holding the Control key and at the same time turning the mouse wheel, while the pointer is positioned over the minimap. The lines (rows) of the log that are visible, are indicated by a shaded area in the minimap. Scrolling the log is done with the scroll bar immediately to the left of the minimap, or by using the mouse wheel while the pointer is positioned over the log.
+
+## User and Developer Documentation
+For more information, check the [Tracy user and developer documentation](https://tno.github.io/vscode-tracy/).
+
+## Developing
+To develop Tracy:
+1. Make sure that [Node.js](https://nodejs.org/en/) (version 18+ recommended) and [Git](https://git-scm.com/) are installed.
+1. Execute: 
+    ```bash
+    # Clone the repository
+    git clone https://github.com/TNO/vscode-tracy.git
+    cd vscode-tracy
+    # Install dependencies
+    npm ci 
+    # Open the repository in Visual Studio Code
+    code .
+    # Start the viewer in watch mode such that changes to src/viewer/* are applied on-the-fly
+    npm run watch-viewer
+    ```
+1. In Vistual Studio Code, go to *Run* (menu bar) -> *Start Debugging*. A new Visual Studio Code instance (*Extension Development Host*) will be started with Tracy installed. Open a `*.tracy.json` file to see the viewer.
+    - Changes made to `src/viewer/*` are applied on-the-fly as long as `npm run watch-viewer` from the previous step is running. You only need to close the viewer and re-open the `*.tracy.json` file.
+    - Changes made to `src/extension/*` are **NOT** applied on-the-fly, to apply them go to *Run* (menu bar) -> *Restart Debugging*.
+
+## Creating a new release
+To create a new release, go to the [CI GitHub action](https://github.com/TNO/vscode-tracy/actions/workflows/ci.yml) -> *Run workflow* -> Choose *Branch*: **main** -> adjust the *Release type* accordingly -> *Run workflow*. Wait till build completes and add the [release notes](https://github.com/TNO/vscode-tracy/releases/latest).

docs/_config.yml

@@ -0,0 +1,9 @@
+plugins:
+  - jekyll-relative-links
+  - jekyll-remote-theme
+relative_links:
+  enabled: true
+  collections: true
+remote_theme: pages-themes/[email protected]
+
+

docs/developer-documentation/architecture.md

@@ -0,0 +1,30 @@
+# Tracy Architecture
+
+# Introduction
+
+
+# Component graph
+![](../figures/Tracy-Architecture.svg)
+
+---
+### React Components
+- ### [`App`](./components/App.md)
+- ### [`LogView`](./components/LogView.md)
+	 - Presents the log as a table in which each column corresponds to a log entry field. 
+- ### [`Minimap`](./components/Minimap.md)
+	 - Allows navigation and analysis of the log by representing information as glyphs (coloured rectangles). Each minimap column represents a log column as a column of glyphs.
+- ### Structure Matching related components
+	- ### [`StructureDialog`](./components/StructureDialog.md)
+		- Allows users to search for occurrences of a structure (i.e., pattern) in the opened log.
+	- ### [`StructureTable`](./components/StructureTable.md)
+		- Contains the structure definition used for the structure matching.
+- ### Rule-related components
+	- ### [`FlagsDialog`](./components/FlagsDialog.md)
+	- ### [`StatesDialog`](./components/StatesDialog.md)
+
+### Files containing custom hooks
+
+- ### [`useStructureEntryManager`](./hooks/useStructureEntryManager.md)
+- ### [`useStructureRegularExpressionManager`](./hooks/useStructureRegularExpressionManager.md)
+- ### [`useStyleManager`](./hooks/useStyleManager.md)
+- ### [`useWildcardManager`](./hooks/useWildcardManager.md)

docs/developer-documentation/components/App.md

@@ -0,0 +1,59 @@
+# Component name
+(Screenshot of component - Optional)
+
+---
+(Short description)
+
+## Relations to other components
+
+- **Parent:** ParentComponent
+- **Children:**
+	- Child1
+	- Child2
+
+## Props
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| `prop1` | `type1` | short description |
+| `prop2` | `type2` | short description |
+| `prop3` | `type3` | short description |
+
+## State
+
+| Name | Type | Initial Value | Description |
+| ---- | ---- | ------------- | ----------- |
+| `stateObj1` | `type1` | `init value` | short description |
+| `stateObj2` | `type1` | `init value` | short description |
+| `stateObj3` | `type1` | `init value` | short description |
+
+## 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.
+	- **Returns:** -
+
+- ### `shouldComponentUpdate(...)`
+	- **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`
+
+- ### `render()`
+	- **Description:**
+	- **Returns:** Div of type `JSX.Element` containing....
+
+### Functionality-related functions
+- ### `exampleFunctionWithNoParams()`
+	- **Description:** short description of what happens in the function.
+	- **Returns:** -
+
+- ### `exampleFunctionWithParams(...)`
+	- **Params:**
+	    - `name: type`
+	- **Description:** short description of what happens in the function.
+	- **Returns:** -

docs/developer-documentation/components/ContextMenu.md

@@ -0,0 +1,59 @@
+# Component name
+(Screenshot of component - Optional)
+
+---
+(Short description)
+
+## Relations to other components
+
+- **Parent:** ParentComponent
+- **Children:**
+	- Child1
+	- Child2
+
+## Props
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| `prop1` | `type1` | short description |
+| `prop2` | `type2` | short description |
+| `prop3` | `type3` | short description |
+
+## State
+
+| Name | Type | Initial Value | Description |
+| ---- | ---- | ------------- | ----------- |
+| `stateObj1` | `type1` | `init value` | short description |
+| `stateObj2` | `type1` | `init value` | short description |
+| `stateObj3` | `type1` | `init value` | short description |
+
+## 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.
+	- **Returns:** -
+
+- ### `shouldComponentUpdate(...)`
+	- **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`
+
+- ### `render()`
+	- **Description:**
+	- **Returns:** Div of type `JSX.Element` containing....
+
+### Functionality-related functions
+- ### `exampleFunctionWithNoParams()`
+	- **Description:** short description of what happens in the function.
+	- **Returns:** -
+
+- ### `exampleFunctionWithParams(...)`
+	- **Params:**
+	    - `name: type`
+	- **Description:** short description of what happens in the function.
+	- **Returns:** -

docs/developer-documentation/components/FlagsDialog.md

@@ -0,0 +1,59 @@
+# Component name
+(Screenshot of component - Optional)
+
+---
+(Short description)
+
+## Relations to other components
+
+- **Parent:** ParentComponent
+- **Children:**
+	- Child1
+	- Child2
+
+## Props
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| `prop1` | `type1` | short description |
+| `prop2` | `type2` | short description |
+| `prop3` | `type3` | short description |
+
+## State
+
+| Name | Type | Initial Value | Description |
+| ---- | ---- | ------------- | ----------- |
+| `stateObj1` | `type1` | `init value` | short description |
+| `stateObj2` | `type1` | `init value` | short description |
+| `stateObj3` | `type1` | `init value` | short description |
+
+## 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.
+	- **Returns:** -
+
+- ### `shouldComponentUpdate(...)`
+	- **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`
+
+- ### `render()`
+	- **Description:**
+	- **Returns:** Div of type `JSX.Element` containing....
+
+### Functionality-related functions
+- ### `exampleFunctionWithNoParams()`
+	- **Description:** short description of what happens in the function.
+	- **Returns:** -
+
+- ### `exampleFunctionWithParams(...)`
+	- **Params:**
+	    - `name: type`
+	- **Description:** short description of what happens in the function.
+	- **Returns:** -