Function AlgorithmExplorer

src/pages/AlgorithmExplorer.tsx:29–401

()

);

const AlgorithmExplorer: React.FC = () => {
  const { t, i18n } = useTranslation();
  const orderedDetails = getOrderedAlgorithmDetails();
  const [translatedDetails, setTranslatedDetails] = useState<AlgorithmDetail[]>([]);
  
  useEffect(() => {
    setTranslatedDetails(getTranslatedAlgorithmDetails());
  }, [i18n.language]);
  
  const location = useLocation();
  const navigate = useNavigate();
  const initialHadAlgoParamRef = useRef<boolean>(new URLSearchParams(location.search).has("algo"));
  const userInteractedRef = useRef<boolean>(false);
  // Parse query param for deep link (?algo=ID)
  const searchParams = new URLSearchParams(location.search);
  const initialParam = parseInt(searchParams.get("algo") || "", 10);
  const initial = orderedDetails.some((a) => a.id === initialParam) ? initialParam : (orderedDetails[0]?.id ?? 1);
  const [activeId, setActiveId] = useState<number>(initial);
  // Keep the URL in sync with the selected algorithm (replace to avoid adding a history entry per click)
  useEffect(() => {
    if (!initialHadAlgoParamRef.current && !userInteractedRef.current) return;
    const sp = new URLSearchParams(location.search);
    const current = sp.get("algo");
    if (String(activeId) !== current) {
      sp.set("algo", String(activeId));
      navigate({ pathname: location.pathname, search: sp.toString() }, { replace: true });
    }
  }, [activeId]);

  const shouldNoindex = new URLSearchParams(location.search).size > 0;
  
  const active = translatedDetails.find((a) => a.id === activeId) || translatedDetails[0] || orderedDetails[0];
  
  const baseImgRef = useRef<HTMLImageElement | null>(null);
  const baseWorkRef = useRef<{ width: number; height: number; srcData: Uint8ClampedArray } | null>(null);
  const [baseLoaded, setBaseLoaded] = useState(false);
  const [examples, setExamples] = useState<Record<number, ExampleSet>>({});
  const [basePreview, setBasePreview] = useState<string | null>(null);

  const synthesizeBase = () => {
    const w = WORKING_WIDTH;
    const h = Math.round((WORKING_WIDTH * 3) / 4);
    const c = document.createElement("canvas");
    c.width = w;
    c.height = h;
    const ctx = c.getContext("2d");
    if (!ctx) return;
    const grd = ctx.createLinearGradient(0, 0, w, h);
    grd.addColorStop(0, "#000");
    grd.addColorStop(1, "#fff");
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, w, h);
    const rg = ctx.createRadialGradient(w * 0.7, h * 0.3, 10, w * 0.7, h * 0.3, w * 0.8);
    rg.addColorStop(0, "rgba(255,255,255,0.6)");
    rg.addColorStop(1, "rgba(0,0,0,0)");
    ctx.fillStyle = rg;
    ctx.fillRect(0, 0, w, h);
    const id = ctx.getImageData(0, 0, w, h);