feat: drop-down parameters

src/Analysis.tsx

@@ -1,20 +1,30 @@
 import { useEffect, useState } from "react";
 import { baseUrl } from "./api";
 
+interface Prop {
+  name: string;
+  min: string;
+  max: string;
+  step: string;
+  value: string;
+}
+
 interface Params {
   nodeSize: number;
   edgeWidth: number;
   arrowSize: number;
   fontSize: number;
+  distance: number;
 }
 
 export default function Analysis() {
   const [image, setImage] = useState("");
   const [params, setParams] = useState<Params>({
-    nodeSize: 1600,
+    nodeSize: 2000,
     edgeWidth: 1,
     arrowSize: 20,
     fontSize: 10,
+    distance: 0.2,
   });
   const [showControlPanel, setShowControlPanel] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -22,7 +32,7 @@ export default function Analysis() {
   // Function to generate and fetch the graph image
   async function loadImage() {
     setLoading(true);
-    await fetch(`${baseUrl}analysis/image`, {
+    await fetch(`${baseUrl}api/analysis/image`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -44,10 +54,23 @@ export default function Analysis() {
       <button onClick={() => setShowControlPanel(!showControlPanel)}>
         Parameters {showControlPanel ? "⮝" : "⮟"}
       </button>
-      {showControlPanel && (
+      <div id="control-panel" className={showControlPanel ? "opened" : "closed"}>
-        <div id="control-panel">
 
-          <label>Node Size:</label>
+        <div className="control">
+          <label>distance between nodes</label>
+          <input
+            type="range"
+            min="0.01"
+            max="3.001"
+            step="0.05"
+            value={params.distance}
+            onChange={(evt) => setParams({ ...params, distance: Number(evt.target.value) })}
+            onMouseUp={() => loadImage()}
+          />
+          <span>{params.distance}</span></div>
+
+        <div className="control">
+          <label>node size</label>
           <input
             type="range"
             min="500"
@@ -57,8 +80,10 @@ export default function Analysis() {
             onMouseUp={() => loadImage()}
           />
           <span>{params.nodeSize}</span>
+        </div>
 
-          <label>Font Size:</label>
+        <div className="control">
+          <label>font size</label>
           <input
             type="range"
             min="4"
@@ -68,8 +93,10 @@ export default function Analysis() {
             onMouseUp={() => loadImage()}
           />
           <span>{params.fontSize}</span>
+        </div>
 
-          <label>Edge Width:</label>
+        <div className="control">
+          <label>edge width</label>
           <input
             type="range"
             min="1"
@@ -80,8 +107,10 @@ export default function Analysis() {
             onMouseUp={() => loadImage()}
           />
           <span>{params.edgeWidth}</span>
+        </div>
 
-          <label>Arrow Size:</label>
+        <div className="control">
+          <label>arrow size</label>
           <input
             type="range"
             min="10"
@@ -91,9 +120,10 @@ export default function Analysis() {
             onMouseUp={() => loadImage()}
           />
           <span>{params.arrowSize}</span>
+        </div>
 
       </div>
-      )}
+      <button onClick={() => loadImage()}>reload ↻</button>
       {loading ? (
         <span className="loader"></span>
       ) : (