cutt/src/Analysis.tsx

import { useEffect, useState } from "react";
import { apiAuth } 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 Params {
  nodeSize: number;
  edgeWidth: number;
  arrowSize: number;
  fontSize: number;
  distance: number;
  weighting: boolean;
  popularity: boolean;
  show: number;
}

let timeoutID: NodeJS.Timeout | 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,
    show: 2,
  });
  const [showControlPanel, setShowControlPanel] = useState(false);
  const [loading, setLoading] = useState(true);

  // Function to generate and fetch the graph image
  async function loadImage() {
    setLoading(true);
    await apiAuth("analysis/image", params, "POST")
      .then((data) => {
        setImage(data.image);
        setLoading(false);
      })
      .catch((e) => {
        console.log("best to just reload... ", e);
      });
  }

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

  function showLabel() {
    switch (params.show) {
      case 0:
        return "dislike";
      case 1:
        return "both";
      case 2:
        return "like";
    }
  }

  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">
          <datalist id="markers">
            <option value="0"></option>
            <option value="1"></option>
            <option value="2"></option>
          </datalist>
          <div id="three-slider">
            <label>😬</label>
            <input
              type="range"
              list="markers"
              min="0"
              max="2"
              step="1"
              width="16px"
              onChange={(evt) =>
                setParams({ ...params, show: Number(evt.target.value) })
              }
            />
            <label>😍</label>
          </div>
          {showLabel()}
        </div>
        <div className="control">
          <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>
  );
}