Show intermediate states in the loading bar about auto-evaluator

[rlancemartin]

Initially setResults is empty -

 const submit = handleSubmit(async (data) => {
    setShouldShowProgress(true);
    setLoading(true);
    setResults([]);

Because this is empty, progress bar is set with initialProgress -

  const experimentProgress = useMemo(() => {
    if (results.length === 0) {
      return [initialProgress];
    }

When we get data back, we then update via setResults -

onmessage(ev) {
        try {
          const row: Result = JSON.parse(ev.data)?.data;
          setResults((results) => [...results, row]);

And progress bar is updated -

const experimentProgress = useMemo(() => {
    if (results.length === 0) {
      return [initialProgress];
    }

    const res = 15 + Math.floor((results?.length / evalQuestionsCount) * 85);

    if (res === 100) {
      return [finishedProgress];
    }
    const ret = [
      initialProgress,
      {
        value: res,
        color: "blue",
        label: "Generating Evals & Grading",
      },
    ];
    return ret;
  }, [results, evalQuestionsCount]);

[rlancemartin]

Turns out to be tricky.

Leave this as future feature.