Fixes for control extensions, improvements for readme and contributing guide

Author: joeldevelops

.github/CONTRIBUTING.md

@@ -41,7 +41,7 @@ Make use of the issue templates, and label your issues appropriately. If you’r
 
 You will need the following tools to develop NanoAPI:
 
-- [Node.js](https://nodejs.org/en/) version 18 or higher.
+- [Node.js](https://nodejs.org/en/) version 22 or higher.
 
 ### Environment Set Up
 
@@ -72,25 +72,42 @@ $ git remote add upstream https://github.com/nanoapi-io/napi.git
 $ npm install
 ```
 
+> [!NOTE]
+> You may encounter issues on a second or third install of dependencies. If this happens, install with `npm i --no-cache --force` to fix these issues.
+
 ### Running the Project
 
-When running locally, the UI must be built before the CLI can be run.
+When running locally, the shared libraries and the UI must be built before the CLI can be run.
 
-To build the UI:
+To build them:
 
 ```bash
 $ npm run build
 ```
 
-To run the CLI:
+Next, we want to run the CLI and the UI with hot reload. You will need two terminal windows for this.
+
+1. In the first terminal, run the CLI. This command should be run in the `napi` directory with a `workdir` pointing to the project you want to work on. For example, if you want to work on Apache Airflow, run:
 
 ```bash
-$ npm start 
+$ npm run dev:cli -- audit view -- --workdir=/path/to/airflow
 ```
 
 Running the `audit view` command from the CLI will spin up a web server on your localhost. You can access the UI by navigating to `http://localhost:3000`.
 
-> **Note:** In case of port collisions, the UI will automatically switch to the next available port.
+> [!NOTE]
+> In case of port collisions, the UI will automatically switch to the next available port.
+
+2. In the second terminal, run the UI. This command should be run in the `napi` directory as well:
+
+```bash
+$ npm run dev:app
+```
+
+This controls the hot reload functionality for the UI. You can now make changes to the UI and see them reflected in real-time.
+
+> [!IMPORTANT]
+> The react UI elements (sidebar, header, etc.) will automatically reload when you make changes. However any Cytoscape elements will not. You will need to refresh the page to see those changes.
 
 ### Project Setup
 
@@ -102,34 +119,14 @@ git clone https://github.com/apache/airflow.git
 cd airflow
 ```
 
-2. From the `napi` repo initialize the project using the CLI:
+2. From the `napi` repo initialize the project using the CLI, which will create a `.napirc` file in the project root. This file contains the configuration for the project and is required for the CLI to work.:
 ```bash
 cd /path/to/napi # or just use a different terminal
 npm start -- init -- --workdir=/path/to/airflow
 ```
 
-3. This will create a `.napirc` file in root of the project. The file should look like the following. You can copy this content into the file and overwrite it if you are having issues.
-```json
-{
-  "entrypoint": "app.py",
-  "out": "napi_dist",
-  "audit": {
-    "language": "python",
-    "include": ["airflow-core/src/airflow/**/*"],
-    "exclude": [],
-    "targetMaxCharInFile": 5000,
-    "targetMaxLineInFile": 500,
-    "targetMaxDepPerFile": 4
-  }
-}
-```
-
-4. Now the audit view can be run.
-```bash
-npm start -- audit view -- --workdir=/path/to/airflow
-```
-
-5. The audit view will be available at `http://localhost:3000` and should automatically open in your default browser.
+> [!NOTE]
+> If you encounter any issues with the config file, you can [check the reference for the file on our documentation](https://docs.nanoapi.io/default-guide/reference/napirc).
 
 ### Testing
 
@@ -153,6 +150,14 @@ To ensure releases run smoothly, put the content of your changes in our [CHANGEL
 
 We are also building on the documentation process. For now, include any documentation changes in your PRs and we will add them into the main documentation.
 
+The critical documentation to maintain is for any changes that impact the following:
+- CLI commands
+- Configuration file
+- Local development setup
+- Release process
+- Testing
+- Linting
+
 ### Discussions vs Issues
 
 We use GitHub Discussions for general questions, ideas, and feedback. If you have a question, please use the Discussions tab. If you have a bug report or feature request, please use the Issues tab.

README.md

@@ -46,6 +46,9 @@ For the latest updates, visit our [project board](/projects).
 
 ## Installation
 
+> [!IMPORTANT]
+> `napi` works out of the box on both mac and linux systems. To use this tool on Windows, you will need to install [WSL (Windows Subsystem for Linux)](https://learn.microsoft.com/en-us/windows/wsl/install) and run the CLI commands from there.
+
 Ensure you have Node.js (>=22) and npm installed.
 
 https://nodejs.org/en

packages/app/src/components/Cytoscape/ControlExtensions/FiltersExtension.tsx

@@ -168,26 +168,24 @@ export default function FiltersExtension(props: {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
-        <Tooltip content="Filter visible elements" side="top">
-          <Button
-            size="1"
-            variant="ghost"
-            color="violet"
-            highContrast
-            className={`${checkFiltersSet() ? "bg-primary-light/20 dark:bg-primary-dark/20" : ""}`}
-            disabled={props.busy}
-            onClick={() => props.onLayout()}
-          >
-            <MdFilterAlt
-              className={`text-xl h-5 w-5 ${
-                checkFiltersSet()
-                  ? "text-primary-light dark:text-primary-dark"
-                  : "text-gray-light dark:text-gray-dark"
-              }`}
-            />
-            <LuChevronUp />
-          </Button>
-        </Tooltip>
+        <Button
+          size="1"
+          variant="ghost"
+          color="violet"
+          highContrast
+          className={`${checkFiltersSet() ? "bg-primary-light/20 dark:bg-primary-dark/20" : ""}`}
+          disabled={props.busy}
+          onClick={() => props.onLayout()}
+        >
+          <MdFilterAlt
+            className={`text-xl h-5 w-5 ${
+              checkFiltersSet()
+                ? "text-primary-light dark:text-primary-dark"
+                : "text-gray-light dark:text-gray-dark"
+            }`}
+          />
+          <LuChevronUp />
+        </Button>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content color="violet" variant="soft">
         {/* Add filter options here */}

packages/app/src/components/Cytoscape/ControlExtensions/MetricsExtension.tsx

@@ -50,22 +50,17 @@ export default function MetricsExtension(props: {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
-        <Tooltip
-          content="Select metric to highlight failing nodes for that metric"
-          side="top"
+        <Button
+          size="1"
+          variant="ghost"
+          color="violet"
+          highContrast
+          disabled={props.busy}
+          className="py-1.5"
         >
-          <Button
-            size="1"
-            variant="ghost"
-            color="violet"
-            highContrast
-            disabled={props.busy}
-            className="py-1.5"
-          >
-            {getMetricLabel(metric)}
-            <LuChevronUp />
-          </Button>
-        </Tooltip>
+          {getMetricLabel(metric)}
+          <LuChevronUp />
+        </Button>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content color="violet" variant="soft">
         <DropdownMenu.Item