cutt/src/Analysis.tsx

import { useEffect, useState } from "react";
import { baseUrl } from "./api";

//const debounce = <T extends (...args: any[]) => void>(
//  func: T,
//  delay: number
//): ((...args: Parameters<T>) => void) => {
//  let timeoutId: number | null = null;
//  return (...args: Parameters<T>) => {
//    if (timeoutId !== null) {
//      clearTimeout(timeoutId);
//    }
//    console.log(timeoutId);
//    timeoutId = setTimeout(() => {
//      func(...args);
//    }, delay);
//  };
//};
//
interface Prop {
  name: string;
  min: string;
  max: string;
  step: string;
  value: string;
}

interface Params {
  nodeSize: number;
  edgeWidth: number;
  arrowSize: number;
  fontSize: number;
  distance: number;
  weighting: boolean;
  popularity: boolean;
  dislike: boolean;
}

interface DeferredProps {
  timeout: number;
  func: () => void;
}


let timeoutID: number | null = null;
export default function Analysis() {
  const [image, setImage] = useState("");
  const [params, setParams] = useState<Params>({
    nodeSize: 2000,
    edgeWidth: 1,
    arrowSize: 16,
    fontSize: 10,
    distance: 2,
    weighting: true,
    popularity: true,
    dislike: false,
  });
  const [showControlPanel, setShowControlPanel] = useState(false);
  const [loading, setLoading] = useState(false);

  // Function to generate and fetch the graph image
  async function loadImage() {
    setLoading(true);
    await fetch(`${baseUrl}api/analysis/image`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(params)
    })
      .then((resp) => resp.json())
      .then((data) => {
        setImage(data.image);
        setLoading(false);
      });
  }

  useEffect(() => {
    if (timeoutID) {
      clearTimeout(timeoutID);
    }
    timeoutID = setTimeout(() => {
      loadImage();
    }, 1000);
  }, [params]);

  return (
    <div className="stack column dropdown">
      <button onClick={() => setShowControlPanel(!showControlPanel)}>
        Parameters <svg viewBox="0 0 24 24" height="1.2em" style={{ fill: "#ffffff", display: "inline", top: "0.2em", position: "relative", transform: showControlPanel ? "rotate(180deg)" : "unset" }} > <path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" > </path></svg >
      </button>
      <div id="control-panel" className={showControlPanel ? "opened" : ""}>

        <div className="control">
          <div className="checkBox">
            <input
              type="checkbox"
              checked={params.dislike}
              onChange={(evt) => setParams({ ...params, dislike: evt.target.checked })}
            />
            <label>show dislike</label>
          </div>
          <div className="checkBox">
            <input
              type="checkbox"
              checked={params.weighting}
              onChange={(evt) => setParams({ ...params, weighting: evt.target.checked })}
            />
            <label>weighting</label>
          </div>

          <div className="checkBox">
            <input
              type="checkbox"
              checked={params.popularity}
              onChange={(evt) => setParams({ ...params, popularity: evt.target.checked })}
            />
            <label>popularity</label>
          </div>
        </div>

        <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) })}
          />
          <span>{params.distance}</span></div>

        <div className="control">
          <label>node size</label>
          <input
            type="range"
            min="500"
            max="3000"
            value={params.nodeSize}
            onChange={(evt) => setParams({ ...params, nodeSize: Number(evt.target.value) })}
          />
          <span>{params.nodeSize}</span>
        </div>

        <div className="control">
          <label>font size</label>
          <input
            type="range"
            min="4"
            max="24"
            value={params.fontSize}
            onChange={(evt) => setParams({ ...params, fontSize: Number(evt.target.value) })}
          />
          <span>{params.fontSize}</span>
        </div>

        <div className="control">
          <label>edge width</label>
          <input
            type="range"
            min="1"
            max="5"
            step="0.1"
            value={params.edgeWidth}
            onChange={(evt) => setParams({ ...params, edgeWidth: Number(evt.target.value) })}
          />
          <span>{params.edgeWidth}</span>
        </div>

        <div className="control">
          <label>arrow size</label>
          <input
            type="range"
            min="10"
            max="50"
            value={params.arrowSize}
            onChange={(evt) => setParams({ ...params, arrowSize: Number(evt.target.value) })}
          />
          <span>{params.arrowSize}</span>
        </div>

      </div>
      <button onClick={() => loadImage()}>reload ↻</button>
      {
        loading ? (
          <span className="loader"></span>
        ) : (
          <img src={"data:image/png;base64," + image} width="86%" />
        )
      }
    </div >
  );
}