Visualization Tool Fix (#180)

* Visualization Tool Fix

* Fix node-gyp compatilibity issues with Python 13

* Clarified the build steps with data files in the README.md file

* Corrected sample file paths

---------

Co-authored-by: Alam, Maksudul <alamm@ornl.gov>

Author: maksud

viz/README.md

@@ -17,9 +17,10 @@ ExaGO visualization uses the following tools to generate the visuals.
 - [React-map-gl](https://visgl.github.io/react-map-gl/) framework
 - [Chart.js](https://www.chartjs.org/)
 
-Before launching the visualization, one needs to install these packages. This can be done with the following two steps:
-1. Install [Node.js](https://nodejs.org/en/)
-2. Do `npm install --legacy-peer-deps` in this directory (`viz`)to install all the dependencies.
+Before launching the visualization, one needs to install these packages. This can be done with the following steps:
+1. Install Node Version Manager (NVM). On MAC use `brew install nvm`.
+2. Install [Node.js] version 16 (https://nodejs.org/en/) using `nvm install 16`
+3. Do `npm install --legacy-peer-deps` in this directory (`viz`)to install all the dependencies.
 
 > [!WARNING]  
 > Per https://github.com/pnnl/ExaGO/issues/129 `--legacy-peer-deps` is required as an argumnet to `npm install`. This will ideally be removed once the vizualization is no longer experimnetal.
@@ -31,11 +32,19 @@ This input JSON file can be either created externally OR generated as an output
 ```
 ./opflow -netfile <netfile> -save_output -opflow_output_format JSON -gicfile <gicfilename>  
 ```
+
 Note that the `OPFLOW` application is available in the `$EXAGO_INSTALL/bin` directory where `$EXAGO_INSTALL` is the ExaGO installation directory.
 
 The above command will run a `OPFLOW` on the given network and generate an output file called `opflowout.json`. The `-gicfile` is an additional option one can provide to provide the file that has the geospatial coordinates (latitude/longitude) for the network. If the geospatial coordinates are not provided then OPFLOW draws the network as a circle. It is highly recommended that one provides the geospatial coordinate file as an input to display the network correctly on the map. The geospatial coordinate file should have the same format as used for the [Electric Grid Test Case Repository](https://electricgrids.engr.tamu.edu/) synthetic networks. 
 
-Copy over the `opflowout.json` file to the `viz/data` subdirectory. Next, run the python script `geninputfile.py` to load the JSON file in the visualization script.
+For example, with Texas 2000 bus synthetic data, executing the following `opflow` will produce the `opflowout.json` output. The case files are provided in the data folder.
+
+```
+opflow -netfile case_ACTIVSg2000.m -save_output -opflow_output_format JSON -gicfile ACTIVSg2000_GIC_data.gic
+```
+
+Copy over the `opflowout.json` file to the `viz/data` subdirectory. Next, run the python script `geninputfile.py` from `viz` folder to load the JSON file in the visualization script.
+
 ```
 python geninputfile.py opflowout.json
 ```
@@ -45,6 +54,8 @@ You are ready to launch the visualization now.
 Note: If you have created the JSON file externally then simply copy it over in the `viz/data` subdirectory and run the `geninputfile.py` script using the above command.
 
 ## Launch visualization
+The visualization expects a file name `case_data.json` in the `viz/data` subdirectory. Copy/Rename the file as `case_data.json` in that subdirectory to be used by the visualization tool.
+
 To launch the visualization, run
 ```
 npm start