Updated to load the json file from the data folder

Author: Alam, Maksudul

viz/README.md

@@ -46,16 +46,10 @@ For example, with Texas 2000 bus synthetic data, executing the following `opflow
 opflow -netfile case_ACTIVSg2000.m -save_output -opflow_output_format JSON -gicfile ACTIVSg2000_GIC_data.gic
 ```
 
-Next, go to the `viz` folder and run the following python script `geninputfile.py` from the `viz` folder to load the JSON file (`path/to/opflowout/opflowout.json`) in the visualization script. It will copy the `json` file to the `viz/data` subdirectory and create/overwrite a file named `viz/src/module_casedata.js`. The `module_casedata.js` file is an application source file to load the data file `opflowout.json`. Note, the visualization tool expects the file (`opflowout.json`) to be present in `viz/data` forlder, so it is copied by this script.
-
-```
-python geninputfile.py path/to/opflowout/opflowout.json
-```
+Next, you can put the `opflowout.json` file in the `viz/data` folder. When the visualization tool will be launched, it will find all `*.json` files in the `viz/data` folder and show a list of files in the top left corner. The first item in the list will be visualized as default. Users can change the selection and the visualization will be updated accordingly. In addition, users can upload a compatible `json` case file (generated via `opflow`) using the file upload button next to the selection list.
 
 Now you are ready to launch the visualization now. 
 
-Note: If you have already created or have the JSON file externally without running the `opflow` command as instructed above, simply run the `geninputfile.py` script using the above command.
-
 ## Launch visualization
 To launch the visualization, run
 

viz/data/counties.json viz/geo_data/counties.jsonviz/data/counties.json renamed to viz/geo_data/counties.json

@@ -138,26 +138,18 @@ function valuetext(value) {
   return `${value.toFixed(2)}`;
 }
 
-
-// 39.8283° N, 98.5795° 
-
-
 const INITIAL_VIEW_STATE = {
   latitude: 39.8283,
   longitude: -98.5795,
-  zoom: 5,
+  zoom: 4,
   maxZoom: 16,
   pitch: 0,
   bearing: 0,
 };
 
-
-
-const CASES = [
-  { label: "500", file: "opflowout-500.json" },
-  { label: "10K", file: "opflowout-10K.json" },
-  { label: "70K", file: "opflowout-70K.json" },
-];
+const DATA_FILES = Object.keys(import.meta.glob("../data/*.json", { eager: true })).map((path) =>
+  path.split("/").pop()
+);
 
 function App({ refdata, refflowdata, refflowdata_reactive, ggdata, gendata, generation, areas, zones, countyload, countyloaddata, countymaxPd, mapcenter, mapStyle = MAP_STYLE }) {
 
@@ -225,6 +217,23 @@ function App({ refdata, refflowdata, refflowdata_reactive, ggdata, gendata, gene
 
   const [tooltip, setTooltip] = useState();
 
+
+  const GoHome = () => {
+
+    setInitialViewState((viewState) => ({
+      ...INITIAL_VIEW_STATE
+    }));
+
+    mapRef.current?.flyTo({
+      center: [mapcenter.longitude, mapcenter.latitude],
+      zoom: INITIAL_VIEW_STATE.zoom,
+      pitch: INITIAL_VIEW_STATE.pitch,
+      duration: 1200,
+    });
+
+    setShowPopup({ ...showPopup, display: false });
+  }
+
   useEffect(() => {
 
     setGridData(refdata);
@@ -625,21 +634,7 @@ function App({ refdata, refflowdata, refflowdata_reactive, ggdata, gendata, gene
     }
   });
 
-  const GoHome = () => {
-
-    setInitialViewState((viewState) => ({
-      ...INITIAL_VIEW_STATE
-    }));
-
-    mapRef.current?.flyTo({
-      center: [mapcenter.longitude, mapcenter.latitude],
-      zoom: INITIAL_VIEW_STATE.zoom,
-      pitch: INITIAL_VIEW_STATE.pitch,
-      duration: 1200,
-    });
-
-    setShowPopup({ ...showPopup, display: false });
-  }
+  
 
   const [netlayeractive, setNetLayerActive] = useState(true);
 
@@ -1585,6 +1580,7 @@ function App({ refdata, refflowdata, refflowdata_reactive, ggdata, gendata, gene
     const response = await fetch(`/data/${filename}`);
     const json = await response.json();
     const case_data = setInputCaseData(json);
+    GoHome();
     console.log("Loaded case data:", case_data);
   }
 
@@ -1969,7 +1965,7 @@ const label = { color: "#222" };
 
 function AppContainer() {
 
-  const [selected, setSelected] = useState(CASES[0].file);
+  const [selected, setSelected] = useState(DATA_FILES[0]);
   const [casedata, setCasedata] = useState(null);
   const [loading, setLoading] = useState(false);
   const [err, setErr] = useState(null);
@@ -1985,6 +1981,7 @@ function AppContainer() {
         if (!res.ok) throw new Error(`Failed to load ${selected}: ${res.status}`);
         const json = await res.json();
         if (!cancelled) setCasedata(json);
+
       } catch (e) {
         if (!cancelled) setErr(e);
       } finally {
@@ -2062,11 +2059,12 @@ function AppContainer() {
   return (
     <>
       <select value={selected} onChange={(e) => setSelected(e.target.value)}>
-        {CASES.map((c) => (
-          <option key={c.file} value={c.file}>{c.label}</option>
+        {DATA_FILES.map((c) => (
+          <option key={c} value={c}>{c}</option>
         ))}
       </select>
 
+      Upload a JSON case file:
       <input
         type="file"
         accept=".json"

viz/src/App.jsx

@@ -1,4 +1,4 @@
-import countydata from "../data/counties.json";
+import countydata from "../geo_data/counties.json";
 import { center, convex, bbox } from "@turf/turf";
 import us from "us";